When I search my site and hit the enter key, the search performs correctly, but hitting the button, it does not

Question

For example, if I search my site for "4486043", then hit enter, I get a search result. If I click the button next to the search bar, it searches for "Search this website...", which is the default text of the textbox.

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
}

I have a JSFiddle here: http://jsfiddle.net/allisonc/zY6h2/

Answer 1

There is nothing strange, hitting on enter your textbox isn't losing focus, but clicking on search it is, and you have a mistake in your onblur() handler.

Anyway I can describe the situation with your code:

onfocus="hidetext(this)" - You're activating the focus and clearing the text, then user types, and blurs it by clicking on "search" button.

onblur="showtext(this)" under this event handler function you're checking if(searchtext != null) , but you've gave old value to your searchtext variable in hidetext function, and this expression will always true.

You need to restore the value to "Search..." when user hasn't typed anything.

So you have to check if the textbox value is null.

function showtext(id){
    if(id.value.trim() == ""){ // used trim for " " cases 
        id.value = searchtext;
        searchtext = "";
    }
}

I've update your fiddle, please check

Similar question and answer from stackoverflow

NOTE: Use HTML5 placeholder attribute, and everything will be clear. Also there is javascript lib for browsers which are doesn't support placeholders. See Placeholder.js

Answer 2

您需要知道按钮上的“占位符”文本是什么，并且仅在文本与占位符不同时才提交