2

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

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，仍然无法使其工作。

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

4

4 回答 4

13

使用HTML5 占位符属性：

<input type="text" placeholder="Search" />

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

于 2012-12-28T12:06:24.107 回答
1

尝试使用 HTML占位符属性。

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

于 2012-12-28T12:07:30.910 回答
0

查看jQuery Placeholder在旧浏览器中对占位符的支持可能很有用。

于 2013-04-04T09:36:59.640 回答
0

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

<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 = '';
     }
 }

于 2015-04-09T10:04:26.520 回答