将默认搜索文本添加到搜索框html [英] Adding default search text to search box html

问题描述

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

I am working on adding "search" text to a search box. I am trying to achieve:

onfocus：消失文本

onfocus: disappear text

和

onblur：重新出现文本

onblur: reappear text

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

So far I have achieved this but i have had to hardcode it into 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文件，我会得到相同的结果：

And if I add this the of my .html file I am getting the same result:

例如。

<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文件。

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.

我很抱歉，如果这是一个糟糕的问题我已经做了大约10个不同的.html和.js文件交换和重新映射代码仍然无法获取它在没有实际.html文件中的javascript的情况下工作。

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.

任何帮助都将非常感谢谢谢。

Any help would be much appreciated Thank You.

推荐答案

使用 html5占位符属性：

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

这是一个带有输入元素的小小提琴。

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

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.

这篇关于将默认搜索文本添加到搜索框html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！