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

【问题标题】：textbox is not validated as empty if text is entered and then deleted如果输入文本然后删除，则文本框不会被验证为空
【发布时间】：2011-09-09 23:01:03
【问题描述】：

我对文本框的水印文本有一个烦人的问题。

我想要的是，如果用户单击文本框并且文本框中没有文本而不是默认文本应该出现（例如搜索...）

我有这个功能来检查它：

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。

【问题讨论】：

在 if 条件下使用 document.getElementById("searchtextbox").value="search";

标签： javascript html forms placeholder

【解决方案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 条件确实有效，但未反映更改。

【讨论】：

听起来一点也不刻薄，但您真的认为在浏览器支持的情况下使用 HTML 5 是个好主意吗？
@naveen 如果它是 HTML 5，它也不适用于大多数版本的 IE
嘿，感谢您的回复，但我需要它才能与 IE6 及更高版本一起使用。
@Omer 请查看我的编辑。这里的最佳实践是向支持它的浏览器提供 HTML5 placeholder 属性，进行 Javascript 功能检测，并在失败时为 IE 提供 Javascript 后备解决方案。
@Craig 你说的很少支持是什么意思？你在开玩笑吗？每个广泛使用的浏览器的最新版本都支持 HTML5，包括placeholder。那么，您如何定义广泛支持？

【解决方案2】：

按照 bazmegakapa 的建议，考虑 placeholder 属性。

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

【讨论】：

我爱你，过去 2 小时一直在努力，但不明白我做错了什么。使用 .value = "Search.." 效果很好！