demo

Question

我有一个登录栏，可用于登录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'));
  };
 });

有没有更有效的方法来实现这一目标？我觉得我在重复自己，这从来都不是一件好事。我也很感谢评论这是否是一个用户体验的好主意。

Answer 1

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

Answer 2

首先，你所拥有的是完全有效的。我建议的唯一更改是使用.data()和$.data()使其有效（没有无效的属性）。您可以链接.focus()和.blur()处理程序以防止重复选择。另外，在另一个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'));
 });

You can give it a try here，我个人喜欢这种风格，如果您需要稍后添加第三个选项，它可以非常快速/轻松地完成（尽管可以说你现在的方法仍然很容易）。随着你添加更多，你会在当前的方式上保存越来越多的代码，但它完全取决于你的风格，无论哪种方式都无关紧要。

Answer 3

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

Answer 4

不要零售陈旧的新闻。

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

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

4 个答案:

demo