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

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