使用jQuery清除焦點上的文本框的默認內容

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

首先，你擁有的是完全有效的。我建議的唯一更改是使用.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 2

您還可以使用HTML5屬性「placeholder」，使用Mike Taylor的html5placeholder.jquery.js進行跨瀏覽器兼容性;它會使用原生瀏覽器支持（如果可用）： http://github.com/miketaylr/jQuery-html5-placeholder/blob/master/html5placeholder.jquery.js

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

不要零售陳舊WS。

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