输入字段内的标签在聚焦时消失答案

【问题标题】：Labels inside input fields that disappear when focussed输入字段内的标签在聚焦时消失
【发布时间】：2012-06-06 02:04:25
【问题描述】：

如何获得格式如下的标签：

<label for="email"> Email Address *</label>
<input id="email" type="text" name="email" value="" size="18">

在输入文本框内显示并在输入元素处于焦点或全满时消失？

我找到的解决方案要求我更改 html 代码，但我不能这样做，因为它来自第三方小部件。我可以让标签显示在输入字段的顶部，但我不知道如何让它对输入字段发生的事情做出反应。

【问题讨论】：

您还需要这方面的帮助吗？

标签： javascript html css forms styles

【解决方案1】：

你想要的是一个占位符。它是一个 HTML5 属性，但 IE 和旧版浏览器尚不支持。要填写，那里有几个图书馆。我用过jquery.enablePlaceholder，效果很好。

使用 JQuery，您将能够轻松隐藏/删除当前标签并使用其内容填充占位符属性（如果需要，插件将使用该属性）。

$(document).ready(function() {
    // Fetch the label and its text
    var placeholderText = $("label[for='email']").text();

    // Remove the unnecessary label
    $("label[for='email']").remove();

    // Set the placeholder attribute
    // and enable the plugin for broswer not supporting it
    $("#email").attr('placeholder', placeholderText).enablePlaceholder(); 
});

【讨论】：

梅兰妮，我用了你的答案，谢谢！我虽然可以通过这种方式改进它以适应具有任意数量字段的任何表单$("form label").each(function(){var field = $(this).attr('for'); $('#'+field).attr('placeholder',$(this).text()); $(this).remove(); })

【解决方案2】：

有没有办法覆盖输入onFocus函数？

如果是肯定的，有两种方法：

试试return false;
在该函数上将标签display 属性设置为inline。（不是推荐）

【讨论】：

【解决方案3】：

鉴于您无法更改 HTML 结构，这是实现目标的一种纯 JavaScript 方法：

function placeholding(el,greyed) {
    if (!el) {
        // if you don't specify a DOM node, it quits
        return false;
    }
    else {
        var input = el,
            /* assumes the label element is the previous element sibling
               (requires a fairly up-to-date/compliant browser */
            label = el.previousElementSibling,
            placeholder = label.textContent,
            /* specifies the color string, or uses the default, for the
               color of the place-holder */
            greyed = greyed || '#999';

        label.style.display = 'none';
        input.value = placeholder;
        input.style.color = greyed;
        input.onfocus = function() {
            /* if the current input-value is equal to the place-holder,
               removes that value. */
            if (this.value == placeholder) {
                this.setAttribute('data-oldvalue', this.value);
                this.value = '';
            }
            this.style.color = '#000';
        };
        input.onblur = function() {
            // if no new value has been set, replaces the place-holder
            if (this.value == '' || this.value.length === 0) {
                this.value = this.getAttribute('data-oldvalue');
                this.style.color = greyed;
            }
        };
    }
}

placeholding(document.getElementById('email'));

隐藏前面的label 元素，将其文本用作input 元素中的“占位符”，隐藏该占位符以聚焦input，如果值未更改，则显示该位置-再次持有人。

参考资料：

【讨论】：

【解决方案4】：

如果你会使用 jQuery：

$("#yourForm input[type='text']").each(function(){
    $(this).attr("placeholder", $(this).prev("label").text());
}

【讨论】：