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

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 hack。

更新:如果您需要帮助如何更好地实现，请参阅 Html placeholder text in a textarea form .

---

我还查看了您的代码并修复了它:

jsFiddle Demo

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

在这里使用 setAttribute 不是正确的方法，您不想设置属性，而是设置事件属性 (.value)。您的 if 条件确实有效，但未反射(reflect)更改。