javascript - 输入字段内的标签在聚焦时消失

Question

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

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

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

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

Answer 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(); 
});

Answer 2

有没有办法覆盖输入onFocus功能？

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

• 尝试return false;
• 在该函数上设置标签display属性。inline（不建议）

Answer 3

Answer 4

如果您能够使用 jQuery：

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