例如,如果我在我的网站上搜索“ 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/
参考方案
没什么奇怪的,点击进入您的文本框并不会失去焦点,但是单击搜索就可以了,并且您在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 = "";
}
}
我已经更新了您的小提琴,请check
Similar question and answer from stackoverflow
注意:使用HTML5 placeholder
属性,一切都会变得清晰。
还有不支持占位符的浏览器的javascript库。见Placeholder.js
我需要在我的php中调用js函数,但无法正常工作。有人可以告诉我我在做什么错吗?我该如何轻松地做到这一点?谢谢!我有三个文件: mail.php负责发送$ _POST的内容(工作正常)。我调用我的javascript函数来切换模式,具体取决于邮件是否已发送。 <? ... $response = $sendgrid->send($email);…
如何使用PHP从动态输入字段捕获数组值? - javascript我正在编写一个在线时间跟踪网页,允许用户将学习时间输入该系统。用户将首先输入名称,然后根据日期输入学习时间。一天中可能会有多个学习时间。以下是我第一页的编码,<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…
用jQuery填充模式形式 - javascript我正在将订单表从数据库绘制到datatables(jquery插件)中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是,如何获取单击添加付款按钮以添加付款的行的订单ID。其次,当点击addpayment时,它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段,并使其不可编辑或隐藏,但在提交模态表单时将其发布到服务器。表格和模式表…
JavaScript将PHP中的字符串和整数传递给函数 - javascript我正在尝试将字符串和整数都传递到同一函数中,但是引号引起了问题。我发现错误出在echo $q->info部分,我必须在此代码上使用双引号。有人可以帮我写这个$q->info,但不能获得真正的价值吗?到目前为止,我的代码是<td><a href="javascript:add(<?php echo $q->i…
PHP stringID无法从回显中读入onclick - javascript我有一个音频播放器,可以在HTML中正常工作,但是当我从PHP回显调用时,似乎没有得到div ID的名称,因此它无法播放我的音频。这是我的代码:// Show audio if ($sObj->get('audio') != null) { $sAudio = $sObj->get('audio'); $a…