html - 将标签文本放在输入字段上

Question

我有以下登录表单：

div.field {
    position: relative;
}
label {
   font-size: 14px;
    position: absolute;
    top: 20px;
    left: 3px;
}​

<div class="username field">
    <label for="username">Enter email</label><br />
    <input type="text" class="field" name="email" id="id_email">
</div>
<div class="password field">
    <label for="password">Enter password</label><br />
    <input type="password" class="field" name="password" id="id_password">
</div>​

http://jsfiddle.net/5yBz5/

目前，如果用户单击标签文本所在的任何位置，则不会发生任何事情（即，因为用户单击的是标签文本而不是文本输入）。我希望标签文本出现在文本输入中，但是，当用户单击文本输入字段时，它应该忽略标签文本。我将如何做到这一点？

Answer 1

您应该改为查看 html5占位符属性。这是推荐的方法。

例子：

<input type="text" placeholder="placeholder text"></input>

Answer 2

添加onclick="this.innerHTML=''"到label元素。这远非完美的解决方案，但具有最佳可用性的解决方案将采用不同的方法（在输入元素之前标记元素），并且不会出现问题。

Answer 3

方法二：

使用 jQuery（可选）捕获标签上的单击事件，然后聚焦输入元素：

​$("label").on("click",function(){
    $(this).parent().children("input").focus();
});​​​

http://jsfiddle.net/SsZTh/

Answer 4

为占位符文本使用标签根本不是一个好主意，因为它为尝试填写表单的人提供了糟糕的用户体验。

除此之外，还有几点需要注意：

• 关闭你的input标签
• 标签的 for 属性<label>应该等于id相关元素的属性才能将它们绑定在一起。

如果您想提供占位符文本，请使用 javascript 执行文本替换。例如：

<div>
    <label for="email">Enter email</label>
    <input type="text" class="defaultText" name="email" id="email" title="Enter email" />
</div>
<div>
    <label for="password">Enter password</label>
    <input type="text" name="password" id="password" />
</div>

注意，jQuery的使用：

$(function() {
    $(".defaultText").focus(function () {
        if ($(this).val() == $(this)[0].title) {
            $(this).removeClass("defaultTextActive");
            $(this).val("");
        }
    });

    $(".defaultText").blur(function () {
        if ($(this).val() == "") {
            $(this).addClass("defaultTextActive");
            $(this).val($(this)[0].title);
        }
    });

    $(".defaultText").blur(); 
})();

小提琴示例：http: //jsfiddle.net/5yBz5/4/

Answer 5

将标签的 z-index 设置为 -1 并使输入字段透明。这样，标签会呈现在输入字段“后面”，这样当您单击它时，输入字段会接收事件而不是标签。

div.field {
    position: relative;
}
label {
    font-size: 14px;
    position: absolute;
    top: 20px;
    left: 3px;
    z-index:-1;
}
input {
    background: transparent;
}