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 placeholder属性。这是推荐的做法。

实施例：

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

Answer 2

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

Answer 3

方法2：

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

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

http://jsfiddle.net/SsZTh/

Answer 4

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

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

关闭您的input代码
<label>标记的for属性应该等于相关元素的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

设置标签＆＃39; z-index为-1并使输入字段透明。这样标签就会被渲染出来＆＃34;输入字段，以便当您单击它时，输入字段将接收事件而不是标签。

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

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

5 个答案: