代码之家 › 专栏 › 技术社区 › Radu

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

blur focus textbox login jquery

Radu · 技术社区 · 14 年前

我有一个登录栏,根据用户从下拉列表中选择的值,可以用来登录两个不同的系统。然后,根据用户选择的登录名,我提供了填充每个文本框的默认值。但是,为了让用户更方便,在文本框收到焦点时清除默认内容,然后在模糊时重新填充。

 $('#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'));
  };
 });

有没有更有效的方法来实现这一点?我觉得我在重复我自己,这从来都不是好事。在用户体验方面,我也很感激对这是否是一个好主意的评论。

4 回复 | 直到 14 年前

Nick Craver 14 年前

第一, 你所拥有的是完全正确的 . 我唯一能建议的改变就是 .data() 和 $.data() 使其有效(无无效属性)。你可以把 .focus() 和 .blur() 防止重复选择的处理程序。也没有必要 #loginf 在另一个ID选择器之前…它们应该是唯一的 #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'));
 });â

You can give it a try here ,就个人而言,我喜欢这种风格,以防您以后需要添加第三个选项,它使操作变得非常快速/简单(尽管可以说,您当前的方法仍然使操作变得非常简单)。但是,当您添加更多代码时,您将在当前路径上保存越来越多的代码,但这完全取决于您的样式,这两种方式都不重要。

peol 14 年前

您还可以使用html5属性“placeholder”,使用Mike Taylor的html5 placeholder.jquery.js实现跨浏览器兼容性;如果可用,它将使用本机浏览器支持: http://github.com/miketaylr/jQuery-html5-placeholder/blob/master/html5placeholder.jquery.js

Pavel Strakhov 14 年前

不要散播陈旧的新闻。

http://plugins.jquery.com/project/placeholder

Reigel Gallarde 14 年前

demo

没有 .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;
    };
});
â