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

textbox is not validated as empty if text is entered and then deleted

本文关键字：文本 验证 然后 输入 删除 如果      更新时间：2023-09-26

我在文本框中遇到了一个带有水印的文本的恼人问题。

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

我有这个功能来检查它：

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。

请考虑使用HTML5 placeholder属性。

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

正如我的回答中的许多人所指出的，InternetExplorer不会真正热衷于显示占位符文本（多么令人惊讶）。尽管如此，使用placeholder更具语义，并且无论浏览器是否支持，都可以进行特征检测。

您可以这样做特征检测（从diveintohtml5.ep.io）：

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

如果这是错误的，您可以使用您的Javascript placeholder破解。

更新：如果您需要帮助如何以良好的方式实现，请参阅文本区域表单中的Html占位符文本。

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

jsFiddle演示

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

使用setAttribute不是正确的方法，您不希望设置属性，而是希望设置活动属性（.value）。你的if条件确实有效，但变化没有反映出来。

正如bazmagakapa所建议的，考虑placeholder属性。

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

相关文章：