Question

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

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

非常感谢任何帮助谢谢。

Answer 1

使用html5 placeholder属性：

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

带输入元素的

Here's a small Fiddle。

请注意，在用户自己输入一些文本之前，文本实际上并没有消失。这样，用户将看到更长的提示。

Answer 2

尝试使用Html Placeholder

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

但您仍然希望使用javascript查看demo

Answer 3

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

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

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

4 个答案: