真的很簡單的JavaScript來刪除文本框中的值

Question

四，有一個非常簡單的JavaScript問題。不幸的是，在這裏使用查詢的一部分，但也有類似的方式通過JavaScript來做到這一點。基本上，我正在寫一個小腳本，當你點擊一個帶有值的文本框時，它會取出這個值，以便你可以輸入（例如，對於大多數用戶名框，他們有一個小記錄）。有可能有更好的方法來做到這一點（我已經可以想到一些），所以隨時提出建議。無論如何，我都可以輕鬆地運行該部分，但問題在於，無論何時用戶再次單擊時，所有數據都將被刪除，因此如果他們只是想調整某些功能則無法進行調整。解決這個問題（以秒爲單位的顯示代碼）我把一個檢查變量和一個if。這是它的樣子。 （這是行不通的，順便說一句）

var unumber = 0; 
var pnumber = 0; 

if(unumber<1){ 
    $('#username').click(function(){ 
    unumber = 1; 
    $('#username').val(''); 
}); 
}; 

if(pnumber<1){ 
    $('#password').click(function(){ 
    $('#password').val(''); 
    pnumber = 1; 
    }); 
}; 

什麼我假設的情況是，每一次有人點擊變量被複位，這將導致一個更普遍的問題，如果這是這種情況下，爲什麼會整個腳本，不只是事件處理程序，運行？即時通訊新的JavaScript所以原諒我，如果這是一個愚蠢的問題。無論如何，這是一個非常簡單的腳本，有更好，更有效的方法來做到這一點，但怎麼能這樣做呢？

Answer 1

您的號檢查小於1，應點擊處理程序中

var unumber = 0; 
var pnumber = 0; 

$('#username').click(function(){ 
    if(unumber<1){ 
    unumber = 1; 
    $('#username').val(''); 
    } 
}); 

$('#password').click(function(){ 
    if(pnumber<1){ 
    pnumber = 1; 
    $('#password').val(''); 
    } 
}); 

注意，這並不是很穩定，它不處理tab鍵切換到田間地頭。要解決該問題，請處理focus事件。

另一個問題是，如果您不輸入任何內容並離開該字段，則不會收到該消息。更好的方法是在領域獲得焦點時與初始值進行比較。如果離開現場時沒有任何內容，請恢復到原始值。

這裏有一個jQuery插件創建這些佔位符：https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

此外，新的瀏覽器支持placeholder屬性，它正是這麼做的http://www.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/

Answer 2

我會說這樣做的最好的方法是有文本輸入內的清晰按鈕。在這裏看到的例子：How do I put a clear button inside my HTML text input box like the iPhone does?

Answer 3

無需凌亂號碼的檢查，使用數據的元素對有問題

這應該爲你工作。

$('#username,#password').focus(function(){ 
    if(!$(this).data('seen')) { 
    $(this).data('seen',true); 
    $(this).val(''); 
    } 
}); 

http://jsfiddle.net/DeZ7D/

你可以存儲佔位符和替換回模糊，如果用戶沒有輸入任何東西。 更詳細的實施在這裏：

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html