Question

在下面的代码中，我想使用jQuery将单词"username"放入值字段中。然后，当用户选择输入框时，单词“用户名”将消失，留下空输入字段供用户输入其用户名。

这可以用jQuery完成吗？

<p class="login-username">
    <input type="text" name="log" id="user_login" class="input" value="" size="20" tabindex="10">
</p>

Answer 1

您可以使用HTML5 placeholder作为

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

SOURCE

<强>更新

要通过jQuery更改HTML并将占位符添加到输入字段，您可以执行此操作

$("input").prop("placeholder", "username");

DEMO

Answer 2

占位符属性可能是您想要的，但要回答您的问题：

$(".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");
  }
});

Answer 3

$("#user_login").val("username");


$("#user_login").focus(function(){
    $(this).val("");
});

工作示例：http://jsfiddle.net/jbB35/

Answer 4

选项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;
}

有关其他详细信息，请参阅this SO question。

注意：请注意，并非所有浏览器都支持placeholder。您可以查看支持的浏览器here。

Answer 5

你不需要jQuery。您可以使用placeholder属性。

从潜水到HTML5：

HTML5为Web表单带来的第一个改进是设置的能力占位符文本在输入字段中。显示占位符文本只要字段为空，在输入字段内。当你点击 on（或tab to）输入字段并开始键入占位符文本消失。

http://diveintohtml5.info/forms.html#placeholder

Answer 6

使用HTML5，您只需设置placeholder="username"，现代浏览器就会自动处理此问题。为了抓住落后者，有许多shim或shiv脚本，例如this one或this one，可为非HTML5兼容的浏览器提供占位符支持。

Answer 7

如果您使用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);
});

Answer 8

您可以使用简单的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>

使用jQuery将值插入输入字段？

8 个答案: