Javascript 将默认搜索文本添加到搜索框 html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14069301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding default search text to search box html
提问by Otis Wright
I am working on adding "search" text to a search box. I am trying to achieve:
我正在向搜索框中添加“搜索”文本。我正在努力实现：
onfocus: disappear text
onfocus：消失文字
And
和
onblur: reappear text
onblur：重新出现文本
So far I have achieved this but i have had to hardcode it into html:
到目前为止，我已经实现了这一点，但我不得不将其硬编码为 html：
eg.
例如。
<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'}">
And if I add this the of my .html file I am getting the same result:
如果我添加这个 .html 文件，我会得到相同的结果：
eg.
例如。
<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>
(courtesy: http://zenverse.net/javascript-search-box-show-default-text-on-load/)
（礼貌：http: //zenverse.net/javascript-search-box-show-default-text-on-load/）
What i am trying to achieve is using the above code in an external .js file but no matter what I do i cannot manage to back-link the code to my search box in my .html file.
我想要实现的是在外部 .js 文件中使用上述代码，但无论我做什么，我都无法将代码反向链接到我的 .html 文件中的搜索框。
I am sorry if this is a bad question I have made about 10 different .html and .js files swapping and remapping code and still can't get it to work without having the javascript in the actual .html file.
如果这是一个不好的问题，我很抱歉，我已经做了大约 10 个不同的 .html 和 .js 文件交换和重新映射代码，但如果没有实际的 .html 文件中的 javascript，仍然无法让它工作。
Any help would be much appreciated Thank You.
任何帮助将不胜感激谢谢。
回答by Cerbrus
Use the html5 placeholderproperty:
使用html5 占位符属性：
<input type="text" placeholder="Search..." />
Here's a small Fiddlewith the input element.
Notice that the text doesn't actually go away until the user enters some text, himself. This way, the user will see the hint longer.
请注意，在用户自己输入一些文本之前，文本实际上不会消失。这样，用户将看到更长时间的提示。
回答by Champ
try using Html Placeholder
尝试使用 Html占位符
<input type="text" name="s" id="search-text" size="15" value="" Placeholder="Search" >
But you still want do it with javascript see the demo
但是你仍然想用 javascript 来做，看演示
回答by breez
Might be useful to take a look at jQuery Placeholderfor placeholder support in older browsers.
查看jQuery Placeholder在旧浏览器中的占位符支持可能很有用。
回答by Reshma bhalekar
Use below script it is working fine.
使用下面的脚本它工作正常。
<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 = '';
}
}
