0

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

有没有更有效的方法来实现这一点？我觉得我在重复自己，这绝不是一件好事。我也很欣赏关于这在用户体验方面是否是一个好主意的评论。

4

4 回答 4

3

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

于 2010-07-29T10:44:04.980 回答
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'));
 });​

你可以在这里试一试，我个人只是喜欢这种风格，以防你以后需要添加第三个选项，它使它非常快速/容易做到（尽管可以说你当前的方法仍然很容易）。但是，随着您添加更多内容，您将通过当前方式在这条路线上保存越来越多的代码，但这完全取决于您的风格，无论哪种方式都无关紧要。

于 2010-07-29T10:39:16.080 回答
0

演示

没有.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;
    };
});
​
于 2010-07-29T11:27:23.847 回答
0

不要零售过时的新闻。

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

于 2010-07-29T11:43:08.803 回答