Question

例如，如果我在我的网站上搜索＆＃34; 4486043＆＃34;，然后按回车键，我会得到一个搜索结果。如果我点击搜索栏旁边的按钮，它会搜索＆＃34;搜索此网站...＆＃34;，这是文本框的默认文本。

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/

Answer 1

没有什么奇怪的，点击输入你的文本框没有失去焦点，但点击搜索就是，你的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 lib不支持占位符。见Placeholder.js

Answer 2

您需要知道按钮点击什么是您的＆＃34;占位符＆＃34;文本并仅在文本与占位符不同时提交

当我搜索我的网站并点击回车键时，搜索功能正常，但点击按钮却没有

2 个答案: