将默认搜索文本添加到搜索框 html答案

【问题标题】：Adding default search text to search box html将默认搜索文本添加到搜索框 html
【发布时间】：2012-12-28 12:04:38
【问题描述】：

我正在向搜索框添加“搜索”文本。我正在努力实现：

onfocus：文字消失

和

onblur：重新出现文本

到目前为止，我已经实现了这一点，但我不得不将它硬编码到 html 中：

例如。

<input type="text" name="s" id="search-text" size="15" value="Search"  
onfocus="if (this.value==this.defaultValue)
this.value='';" onblur="if(this.value==''){this.value='Search'}">

如果我将这个添加到我的 .html 文件中，我会得到相同的结果：

例如。

<script type="text/javascript">
var defaultText = "Search...";
var searchBox = document.getElementById("search");

//default text after load
searchBox.value = defaultText;

//on focus behaviour
searchBox.onfocus = function() {
    if (this.value == defaultText) {//clear text field
        this.value = '';
    }
}

//on blur behaviour
searchBox.onblur = function() {
    if (this.value == "") {//restore default text
        this.value = defaultText;
    }
}
</script>

（礼貌：http://zenverse.net/javascript-search-box-show-default-text-on-load/）

我想要实现的是在外部 .js 文件中使用上述代码，但无论我做什么，我都无法将代码反向链接到我的 .html 文件中的搜索框。

很抱歉，如果这是一个不好的问题，我已经做了大约 10 个不同的 .html 和 .js 文件交换和重新映射代码，但如果没有实际的 .html 文件中的 javascript，仍然无法使其工作。

任何帮助将不胜感激谢谢。

【问题讨论】：

标签： javascript html search external

【解决方案1】：

使用HTML5 placeholder 属性：

&lt;input type="text" placeholder="Search" /&gt;

请注意，在用户输入一些文本之前，文本不会消失。这样，用户会看到更长时间的提示。

【讨论】：

【解决方案2】：

尝试使用 HTML placeholder 属性。

<input type="text" name="s" id="search-text" size="15" value="" placeholder="Search" />

但如果你仍然想用 JavaScript 来做，请看下面的演示：

var defaultText = "Search...";
var searchBox = document.getElementById("search");
 
//default text after load
searchBox.value = defaultText;
 
//on focus behaviour
searchBox.onfocus = function() {
    if (this.value == defaultText) {//clear text field
        this.value = '';
    }
}
 
//on blur behaviour
searchBox.onblur = function() {
    if (this.value == "") {//restore default text
        this.value = defaultText;
    }
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form method="get" action="">
    <input type="text" name="search" id="search" value="" />
    <input type="submit" name="submit" value="Search" />
</form>
 

</body>
</html>

【讨论】：

W3fools。该网站充满了不好的例子。另外，我认为您可能在复制/粘贴时犯了错误。 ;-)

【解决方案3】：

查看 jQuery Placeholder 以了解旧版浏览器中的占位符支持可能会有用。

【讨论】：

【解决方案4】：

使用下面的脚本可以正常工作。

<script type="text/javascript">
 var defaultText = "Sitede ara…";
 var searchBox = document.getElementById("ctl00_ctl34_S52EF3DAB_InputKeywords");

 //default text after load
 searchBox.value = defaultText;

 //on focus behaviour
 searchBox.onfocus = function () {
     if (this.value == defaultText) {//clear text field
         this.value = '';
     }
 }

【讨论】：