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

请考虑使用 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）。你的if条件确实有效，但没有反映出这种变化。

Answer 2

正如bazmegakapa所建议的那样，请考虑placeholder属性。

要回答您的问题，您的代码无效，因为您使用的是setAttribute，而用户只修改了属性value。不要使用setAttribute，请尝试使用.value = 'Search...'

如果输入文本然后删除文本，则文本框不会验证为空

2 个答案: