在下面的代码中，我想使用 jQuery 将单词"username"放入 value 字段中。然后，当用户选择输入框时，“用户名”一词将消失，留下一个空白输入字段供用户输入他的用户名。
这可以用 jQuery 完成吗？
<p class="login-username">
<input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10">
</p>
问问题
12098 次
8 回答
4
placeholder您可以为此使用 HTML5
<input type="text" placeholder="Username" />
并为较旧的浏览器修复它（这正是您要问的部分）
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
更新
要通过 jQuery 更改 HTML 并向输入字段添加占位符，您可以这样做
$("input").prop("placeholder", "username");
于 2012-11-20T00:57:33.740 回答
1
占位符属性可能是您想要的，但要回答您的问题：
$(".login-username input").val("username");
$(".login-username input").on("focus", function() {
if($(this).val() == "username") {
$(this).val("");
}
}).on("blur", function() {
if($(this).val() == "") {
$(this).val("username");
}
});
于 2012-11-20T00:59:27.227 回答
1
$("#user_login").val("username");
$("#user_login").focus(function(){
$(this).val("");
});
工作示例：http: //jsfiddle.net/jbB35/
于 2012-11-20T00:59:28.723 回答
0
你可以只使用简单的javascript：
<p class="login-username">
<input type="text" name="log" id="user_login" class="input" value="Username" size="20" tabindex="10" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
</p>
于 2012-11-20T01:07:31.977 回答
0
如果你使用 XHTML
var user_login_text="Username";
$("#user_login").val=user_login_text;
$("#user_login").focus(function(){
$(this).val("");
}).blur(function(){
$(this).val(user_login_text);
});
于 2012-11-20T01:02:34.473 回答
0
选项 1：jQuery 插件（或自己编写）
有几个默认文本插件可供选择。我偏爱这个：http ://www.examplet.buss.hk/jquery/defaultText.php 。
选项 2：HTML5 占位符属性
利用placeholder属性 (HTML5)。在受支持的浏览器上使用placeholder将为您提供所需的功能。
<input type="text" id="user_login" placeholder="username" />
如果您选择使用占位符路线，您可以像这样设置默认文本的样式：
input::-webkit-input-placeholder {
color: #999;
}
input:-moz-placeholder {
color: #999;
}
input:-ms-input-placeholder {
color: #999;
}
有关更多详细信息，请参阅此 SO 问题。
注意：请注意，placeholder并非所有浏览器都支持。您可以在此处查看支持的浏览器。
于 2012-11-20T00:57:48.273 回答
0
为此，您不需要 jQuery。您可以只使用该placeholder属性。
从潜入 HTML5：
HTML5 为 Web 表单带来的第一个改进是能够在输入字段中设置占位符文本。只要字段为空，占位符文本就会显示在输入字段内。当您单击（或制表符）输入字段并开始输入时，占位符文本会消失。
于 2012-11-20T00:57:55.737 回答