Question

当用户将焦点设置到我的HTML页面上的编辑控件时，我希望其他一些文本显示在“它周围”，提供一些关于如何填写编辑控件的提示，以及一些用于填充它的按钮随机数据。用javascript或jquery或其他什么方法做到这一点的最佳方法是什么？

感谢。

Answer 1

您可以挂钩控件的focus和blur事件，并使用它们来显示和隐藏您想要显示和隐藏的元素。

示例1 - 不引人注目

您可以在不使用ID和DOM方法将Javascript放入标记的情况下执行此操作。例如，给定此标记：

<input type='text' id='userNameField' name='userNameField'>
<span style='display: none' id='userNameFieldHelp'>
User names may contain the characters A-Z, 0-9, and _.
</span>

您可以使用自己喜欢的Javascript库（jQuery，Prototype，Closure等等来连接事件。）。或者这是一个不使用其中任何一个的蹩脚例子：

window.onload = pageInit;
function pageInit() {
    var field = document.getElementById('userNameField');
    field.onfocus = fieldFocus;
    field.onblur = fieldBlur;
}

function fieldFocus() {

    handleHelp(this.id, true);
}

function fieldBlur() {

    handleHelp(this.id, false);
}

function handleHelp(fieldId, show) {
    var span;

    if (fieldId) {
        span = document.getElementById(fieldId + "Help");
        span.style.display = show ? 'inline' : 'none';
    }
}

我不会按字面意思这样做（我会概括一些事情，使用库来轻松地按属性查找内容，使用属性来关联事物而不是ID和命名约定等，等等，但你明白了。

示例2 - 不显眼的和一般，使用Prototype

仅作为示例，这是一种使用Prototype的方法，它更通用。字段及其帮助与字段名称和帮助元素的data-help-for属性相关联。

HTML：

<input type='text' name='userNameField' class='helpable'>
<span style='display: none' data-help-for='userNameField'>
User names may contain the characters A-Z, 0-9, and _.
</span>

使用Javascript：

document.observe('dom:loaded', pageInit);
function pageInit() {
    var list;

    // Get a list of all "helpable" fields
    list = $$('.helpable');

    // Watch for focus and blur
    list.observe('focus', handleHelp.curry(true));
    list.observe('focus', handleHelp.curry(false));
}
function handleHelp(show) {
    var help;

    // Get all of the elements that are help for this field
    help = $$('*[data-help-for=' + this.name + ']');

    // Show/hide all of them
    help.invoke(show ? 'show' : 'hide');
}

示例3 - 混合且易碎

只是为了显示一系列选项，您还可以混合使用Javascript和HTML，并使用相对方法（更脆弱 - 如果稍微更改显示，则可以轻松破解）。但是：

HTML：

<input type='text' id='userNameField' name='userNameField'
    onfocus='handleHelp(this, true)'
    onblur='handleHelp(this, false)'
>
<span style='display: none' id='userNameFieldHelp>
User names may contain the characters A-Z, 0-9, and _.
</span>

脚本：

function handleHelp(element, show) {
    var span;

    // Find the next span
    for (span = element; span; spen = span.nextSibling) {
        if (span.nodeType == 1 && span.tagName == 'SPAN') {
            break;
        }
    }

    // Show or hide it
    if (span) {
        span.style.display = show ? 'inline' : 'none';
    }
}

但同样，上面的结构非常脆弱 - 无论出于什么原因在字段和它的帮助之间放入另一个span，错误的显示/隐藏。

Answer 2

在jQuery中，您使用.focus()。这将允许您附加到控件的焦点事件，然后您可以在事件处理程序中进行所需的任何更新。

当焦点离开控件时，还会发生反作用blur事件。

如何使用焦点在控件周围显示页面元素？

2 个答案:

示例1 - 不引人注目

示例2 - 不显眼的和一般，使用Prototype

示例3 - 混合且易碎