如果輸入文本然後刪除文本框，則不會將其驗證爲空

Question

對於文本框的水印文本，我有一個煩人的問題。

我想要的是，如果用戶點擊即可文本框，並有在文本框中沒有文本比默認的文本應該出現（如搜索...）

我有這個功能檢查：

document.getElementById("searchtextbox").onblur = function() { 

if (document.getElementById("searchtextbox").value == "") { 
    document.getElementById("searchtextbox").setAttribute("value", "Search..."); 
} 

它工作的很好，如果我只需點擊裏面並點擊。問題出現在我點擊裏面時，輸入文本並刪除它，然後單擊外部。我試着用Length == 0，value == null，value.trim（）==「」，！value.match（/.+/）來做，並且它們都不返回true。

Answer 1

正如bazmegakapa建議的，考慮placeholder屬性。

要回答你的問題，你的代碼不起作用，因爲你使用的是setAttribute，而用戶只是修改了屬性value。而不是使用setAttribute，請嘗試使用.value = 'Search...'

Answer 2

請考慮使用HTML5 placeholder屬性。

<input type="text" id="searchtextbox" placeholder="Search..." value="" /> 

正如我的回答下，很多人指出，Internet Explorer的不會對您的顯示佔位符文本（一個驚喜）真正熱衷。儘管如此，更多語義使用placeholder和做功能檢測瀏覽器是否支持它。

你可以做特徵檢測這樣的（從diveintohtml5.ep.io）：

function supports_input_placeholder() { 
    var i = document.createElement('input'); 
    return 'placeholder' in i; 
} 

如果這是假的，你可以用你的Javascript placeholder黑客。

更新：如果您需要幫助如何實現一個很好的方式，請參閱Html placeholder text in a textarea form。

---

我還拍了一下你的代碼，並修復它：

jsFiddle Demo

document.getElementById("searchtextbox").onblur = function() { 
    if (this.value == "") { 
     this.value="Search..."; 
    } 
} 

使用setAttribute這裏不是正確的方式，你不希望設置的屬性，但住房（.value）。你的條件實際上是有效的，但這種變化沒有體現出來。