使用jQuery清除焦点上文本框的默认内容

我有一个登录栏，可以用来登录到2个不同的系统，这取决于用户从下拉列表中选择的值。然后，根据用户选择的登录名，我提供默认值来填充每个文本框。然而，当文本框接收到焦点时，清除默认内容，然后在模糊上重新填充，使用户可以更轻松地进行操作

 $('#logintype').change(function() {
  if ($(this).val() == 1) {
   $('#loginf').attr('action','login1.php');
   $('#loginf #user').attr('name', 'userid').attr('defaultValue', 'Username').val('Username');
   $('#loginf #pass').attr('name', 'password').attr('defaultValue', 'password').val('password');
  }
  else {
   $('#loginf').attr('action','login2.php');
   $('#loginf #user').attr('name', 'email').attr('defaultValue', 'Email').val('Email');
   $('#loginf #pass').attr('name', 'passed_password').attr('defaultValue', 'password').val('password');
  };
 });

 $('.textbox').focus(function(){
  if ($(this).val() == $(this).attr('defaultValue')) {
   $(this).val('');
  };
 });

 $('.textbox').blur(function(){
  if ($(this).val() == '') {
   $(this).val($(this).attr('defaultValue'));
  };
 });

有没有更有效的方法来实现这一点？我觉得我在重复我自己，这从来都不是一件好事。我也希望您能就这是否是一个用户体验方面的好主意发表意见。

首先，您所拥有的是完全有效的。我唯一能建议的更改是使用并使其有效（没有无效属性）。可以链接和处理程序以防止重复选择。另外，在另一个ID选择器之前不需要使用

#loginf

，它们应该是唯一的，只是

#ID

在jQuery核心代码中有一个快捷方式

此外，我对其进行了一些修改，使其更具可扩展性，以便您可以在运行时用更少的代码添加任意数量的代码，如下所示：

var types = { "1": { action: "login1.php", 
                     user: { id: "userid", val: "Username" },
                     pass: { id: "password", val: "password" } },
              "2": { action: "login2.php", 
                     user: { id: "email", val: "Email" },
                     pass: { id: "passed_password", val: "password" } } 
            };
$('#logintype').change(function() {
  var type = types[$(this).val()];
  $('#loginf').attr('action', type.action);
  $('#user').attr('name', type.user.id).data('defaultValue', type.user.val).val(type.user.val);
  $('#pass').attr('name', type.pass.id).data('defaultValue', type.pass.val).val(type.pass.val);
}).change();

 $('.textbox').focus(function(){
  if ($(this).val() == $.data(this, 'defaultValue')) $(this).val('');
 }).blur(function(){
  if ($(this).val() == '') $(this).val($.data(this, 'defaultValue'));
 });​

，就我个人而言，我喜欢这种风格，以防以后需要添加第三个选项，这样做非常快/容易（尽管可以说，您当前的方法仍然使这非常容易）。但是，当您添加更多代码时，您将以当前方式保存越来越多的代码，但这完全取决于您的风格，这两种方式都不重要。

首先，您拥有的代码是完全有效的。我唯一能建议的更改是使用并使其有效（没有无效属性）。可以链接和处理程序以防止重复选择。另外，在另一个ID选择器之前不需要使用

#loginf

，它们应该是唯一的，只是

#ID

在jQuery核心代码中有一个快捷方式

此外，我对其进行了一些修改，使其更具可扩展性，以便您可以在运行时用更少的代码添加任意数量的代码，如下所示：

var types = { "1": { action: "login1.php", 
                     user: { id: "userid", val: "Username" },
                     pass: { id: "password", val: "password" } },
              "2": { action: "login2.php", 
                     user: { id: "email", val: "Email" },
                     pass: { id: "passed_password", val: "password" } } 
            };
$('#logintype').change(function() {
  var type = types[$(this).val()];
  $('#loginf').attr('action', type.action);
  $('#user').attr('name', type.user.id).data('defaultValue', type.user.val).val(type.user.val);
  $('#pass').attr('name', type.pass.id).data('defaultValue', type.pass.val).val(type.pass.val);
}).change();

 $('.textbox').focus(function(){
  if ($(this).val() == $.data(this, 'defaultValue')) $(this).val('');
 }).blur(function(){
  if ($(this).val() == '') $(this).val($.data(this, 'defaultValue'));
 });​

---

，就我个人而言，我喜欢这种风格，以防以后需要添加第三个选项，这样做非常快/容易（尽管可以说，您当前的方法仍然使这非常容易）。但是，随着您添加更多内容，您将以当前方式保存越来越多的代码，但这完全取决于您的风格，两种方式都不重要。

您还可以使用HTML5属性“placeholder”，使用Mike Taylor的HTML5 placeholder.jquery.js实现跨浏览器兼容性；它将使用本机浏览器支持（如果可用）：

---

您还可以使用HTML5属性“占位符”，使用Mike Taylor的HTML5 placeholder.jquery.js实现跨浏览器兼容性；它将使用本机浏览器支持（如果可用）：

如果没有

.data（）

，这也可以通过以下方式实现：

$('#logintype').change(function() {
  if ($(this).val() == 1) {
   $('#loginf').attr('action','login1.php');
   $('#user').attr('name', 'userid')[0].defaultValue = 'Username';
   $('#pass').attr('name', 'password')[0].defaultValue= 'password';
  }
  else {
   $('#loginf').attr('action','login2.php');
   $('#user').attr('name', 'email')[0].defaultValue = 'Email';
   $('#pass').attr('name', 'passed_password')[0].defaultValue = 'password';
  };
 });

 $('.textbox').focus(function(){
  if (this.value == this.defaultValue) {
   this.value = '';
  };
 }).blur(function(){
  if (this.value == '') {
   this.value = this.defaultValue;
  };
 });

---

我也可以试试这个

$('#logintype').change(function() {
    var bol = ($(this).val() == 1);
    $('#loginf').attr('action',bol?'login1.php':'login2.php');
    $('#user').val(bol?'Username':'Email').attr('name', 'userid')[0].defaultValue = bol?'Username':'Email';
    $('#pass').attr('name', bol?'password':'passed_password')[0].defaultValue= 'password';
});

$('.textbox').focus(function(){
    if (this.value == this.defaultValue) {
        this.value = '';
    };
}).blur(function(){
    if (this.value == '') {
        this.value = this.defaultValue;
    };
});
​

如果没有

.data（）

，这也可以通过以下方式实现：

$('#logintype').change(function() {
  if ($(this).val() == 1) {
   $('#loginf').attr('action','login1.php');
   $('#user').attr('name', 'userid')[0].defaultValue = 'Username';
   $('#pass').attr('name', 'password')[0].defaultValue= 'password';
  }
  else {
   $('#loginf').attr('action','login2.php');
   $('#user').attr('name', 'email')[0].defaultValue = 'Email';
   $('#pass').attr('name', 'passed_password')[0].defaultValue = 'password';
  };
 });

 $('.textbox').focus(function(){
  if (this.value == this.defaultValue) {
   this.value = '';
  };
 }).blur(function(){
  if (this.value == '') {
   this.value = this.defaultValue;
  };
 });

---

我也可以试试这个

$('#logintype').change(function() {
    var bol = ($(this).val() == 1);
    $('#loginf').attr('action',bol?'login1.php':'login2.php');
    $('#user').val(bol?'Username':'Email').attr('name', 'userid')[0].defaultValue = bol?'Username':'Email';
    $('#pass').attr('name', bol?'password':'passed_password')[0].defaultValue= 'password';
});

$('.textbox').focus(function(){
    if (this.value == this.defaultValue) {
        this.value = '';
    };
}).blur(function(){
    if (this.value == '') {
        this.value = this.defaultValue;
    };
});
​

---

不要散播陈腐的新闻

---

不要散播陈腐新闻

---

---

这里是我发布的内容的一部分：似乎已经足够好了。这里是我发布的内容的一部分：似乎已经足够好了。唯一的问题是，当页面首次加载时，焦点不清楚。另外，您为什么要将数据用于defaultValue，而不用于例如name属性。另外，我忘记了链接.focus（）和.blur（）之类的东西的功能，这已经让它看起来更好了。@Radu-我刚刚更新了，没有注意到onload位，现在已经修复了（调用

.change（）

以在加载时运行处理程序）。这也允许您的输入在开始时没有任何

值

或

名称

属性，因此您可以从makrup中删除这些属性（我在演示中这样做了）。我们在这里不使用属性，因为

defaultValue

不是有效的属性（

name

is！），

数据

存储在

$.cache

对象的其他位置。实际上，使用无效属性并不重要，我只是想让它尽可能干净/兼容：）啊，我不知道它是无效的。@Reigel-它有我上面提到的问题…你应该修复无效的属性和低效的选择器：）@Nick-啊，我认为

defaultValue

是一个javascript，是有效的：）唯一的问题是，当页面第一次加载时，它不清楚焦点。另外，您为什么要将数据用于defaultValue，而不用于例如name属性。另外，我忘记了链接.focus（）和.blur（）之类的东西的功能，这已经让它看起来更好了。@Radu-我刚刚更新了，没有注意到onload位，现在已经修复了（调用

.change（）

以在加载时运行处理程序）。这也允许您的输入在开始时没有任何

值

或

名称

属性，因此您可以从makrup中删除这些属性（我在演示中这样做了）。我们在这里不使用属性，因为

defaultValue

不是有效的属性（

name

is！），

数据

存储在

$.cache

对象的其他位置。实际上，使用无效属性并不重要，我只是想让它尽可能干净/兼容：）啊，我不知道它是无效的。@Reigel-它有我上面提到的问题…你应该修复无效的属性和低效的选择器：）@Nick-啊，我认为

defaultValue

是一个javascript，是有效的：）这真是太棒了，我不知道这会包含在HTML5中。你链接的插件也很小。随着对HTML5支持的增长，我们将牢记这一点。你不应该害怕使用它，它已经非常好用了。Chrome/Safari/Firefox/Opera（较新版本）等浏览器已经在本机上实现了这一功能。：）这真是太棒了，我不知道这会包含在HTML5中。你链接的插件也很小。随着对HTML5支持的增长，请记住这一点。您不应该