Question

我有两个标签元素。我希望第一个能够一直显示，但第二个需要隐藏在焦点上。

如何使用jQuery获得此结果？

<dd>
    <label for="checkcode" class="check_label">=</label>
    <label for="checkcode" class="checkcode_label">enter code</label>
    <img src="/captcha" id="captcha" />
    <input id="checkcode" type="text" name="checkcode" value="" />
</dd>

我需要使用两个定义的“标签”来获得所需的结果。无法设置“值”。

Answer 1

此标签不必使用输入和CSS进行样式设置。如果您的目标浏览器具有现代功能，请使用占位符属性，并使用css：focus更改输入样式：

输入未聚焦时

.checkcodeClass { 边界：0; }
专注时

.checkcodeClass：focus { 边框：1px纯黑色; }

对于不支持占位符的浏览器：

使用jquery放置占位符https://github.com/danielstocks/jQuery-Placeholder

对于不支持CSS的浏览器：焦点：

使用jquery'on'，模糊并专注于替代课程。

Answer 2

$("#checkcode").focus(function(){
    if( $(this).val() == "enter code" ){
        $(this).val("");
    }
}).blur(function(){
    if( $(this).val() == "" ){
        $(this).val("enter code");
    }
});

Example

我们在获得焦点并将其设置回“输入代码”时清空输入的value属性。它比这复杂一点，因为我们正在检查当它获得焦点时是否当前“输入代码”（在这种情况下它会清空它，否则它不会，如果它再次获得焦点，它会保留用户条目））。当它失去焦点时，我们正在检查它是否为空，在这种情况下我们将其更改为“输入代码”（这样可以在用户输入焦点时保持用户输入）。

Answer 3

使用focusin()功能。

$('label.second').focusin(function(){
    $(this).addClass('notShown');
})

如何使用jQuery在<input />元素中创建两个标签？

3 个答案: