javascript - 如何使页面元素出现在具有焦点的控件周围？

Question

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

谢谢。

Answer 1

您可以 Hook 控件的 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 等) Hook 事件。或者这是一个不使用其中任何一个的蹩脚示例:

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，并且会显示/隐藏错误的内容。