例如,如果我在网站上搜索“4486043”,然后按 Enter 键,我会得到搜索结果。如果我单击搜索栏旁边的按钮,它会搜索“搜索此网站...”,这是文本框的默认文本。
HTML/PHP
function tf_common_themes_get_search()
{
$partner_id = tf_partner_get_partner_id();
$search_text = "Search this website...";
$email_updates = "";
if ("creative_habitat" == THEME_NAME)
{
$search_text = "search";
$email_updates = '<div class="emailUpdates-container">
<form id="emailUpdates" action="" method="get">
<div class="pEmailUpdates">
<div class="emailUpdates_background">
<input type="text" name="search" class="emailUpdatesBox" id="emailUpdatesBox" onfocus="hidetext(this)" onblur="showtext(this)" style="color:#9F9F9F;" value="Email address"/>
</div>
<input type="submit" value=" " class="emailUpdatesButton" onclick="checkfield(\'posterSearchBox\');return false;"/>
</div>
</form>
</div>';
}
elseif ("watertown_daily" == THEME_NAME)
{
$search_text = "Search this website...";
}
return '
<div id="top-search">
<div id="search-cat" style="float:left;margin:7px 0 0 15px;"></div>
<div class="search-container">
<form id="search" action="/commonsearch/" method="get">
<div class="pSearch">
<div class="search_background">
<input type="hidden" name="pid" id="pid" value="' . $partner_id . '" />
<input type="text" name="search" class="posterSearchBox" id="posterSearchBox" onfocus="hidetext(this)" onblur="showtext(this)" style="color:#9F9F9F;" value="' . $search_text .'"/>
</div>
<input type="submit" value=" " class="searchButton" onclick="checkfield(\'posterSearchBox\');return false;"/>
</div>
</form>
</div>
</div>';
}
Javascript:
var searchtext = "";
function hidetext(id){
if(searchtext == ""){
searchtext = id.value;
id.value = "";
}
}
function showtext(id){
if(searchtext != ""){
id.value = searchtext;
searchtext = "";
}
}
function checkfield(id){
var search=null;
if(document.getElementById(id))
search=document.getElementById(id).value
if (search != "" && search!=" "){
document.search.submit();
}
return false
}
我这里有一个 JSFiddle:http://jsfiddle.net/allisonc/zY6h2/
最佳答案
没什么奇怪的,点击enter你的文本框并没有失去焦点,但是点击搜索它就会失去焦点,并且你的onblur()
中有一个错误处理程序。
无论如何,我可以用你的代码描述情况:
onfocus="hidetext(this)"
- 您将激活焦点并清除文本,然后用户键入内容,并通过单击“搜索”按钮将其模糊。
onblur="showtext(this)"
在此事件处理函数下,您正在检查 if(searchtext != null)
,但您已将旧值赋予hidetext
函数中的 searchtext 变量,并且此表达式将始终为 true。
当用户未输入任何内容时,您需要将值恢复为“搜索...”。
所以你必须检查文本框值是否为空。
function showtext(id){
if(id.value.trim() == ""){ // used trim for " " cases
id.value = searchtext;
searchtext = "";
}
}
我已经更新了你的 fiddle ,请check
Similar question and answer from stackoverflow
注意:使用 HTML5 placeholder
属性,一切都会清晰可见。
还有适用于不支持占位符的浏览器的 javascript 库。请参阅Placeholder.js
关于javascript - 当我搜索我的网站并按 Enter 键时,搜索会正确执行,但按按钮时,搜索结果不会,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24826160/