Solved

Getting A Search Text Box To Clear Existing Text When You Click Into It

Posted on 2007-11-21
6
1,442 Views
Last Modified: 2010-04-21
Hi,

I have a search box on my site which has the text "Enter Search Words...." in it by default.... how can I get this to clear when someone clicks into the box and appears back again if they click out without typing anything.

The text box is called txtSearch in the HTML.

Many Thanks,
Carl
0
Comment
Question by:net-workx
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 21

Expert Comment

by:nizsmo
ID: 20331212
<input name="txtSearch" type="text" id="txtSearch" value="Enter Search Words..." onfocus="document.getElementById('txtSearch').value=''">
0
 
LVL 21

Expert Comment

by:nizsmo
ID: 20331218
Bearing in mind that javascript has to be enabled on the browser for this to work.

Hope this helps!
0
 
LVL 5

Accepted Solution

by:
administradores earned 500 total points
ID: 20331230
<input name="keyws" id="keyws" type="text" maxlength="128" title="Search" value="Search..." onclick="if(this.value=='Search...')this.value='';" onblur="if(this.value=='') this.value='Search...';" />
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Expert Comment

by:administradores
ID: 20331243
0
 

Author Closing Comment

by:net-workx
ID: 31410480
Although the first option removed the text when clicking into the box, when you moved out of the text box it didnt replace the text again however the second solution worked just fine when you clicked out of the box it replaced the text again...

one problem is that if you click out of it once it removed the text but if you click back into the box it will not clear the text out again...
0
 
LVL 14

Expert Comment

by:TedInAK
ID: 20331503
This will only clear the input if it is the same as it was on page load, in this case "Enter Search Words...." So if the user were to type something but then focus somewhere else it will not erase what they already typed.

<form>
      Search
      <input type="text" name="txtSearch" id="txtSearch" onfocus="hideText(this)" onblur="showText(this)"  />
</form>

<script type="text/javascript">//<![CDATA[
var boxText = "Enter Search Words....";

document.getElementById("txtSearch").value = boxText;

function hideText(obj) {
      if (obj.value == boxText) {
            obj.value = "";
      }
}

function showText(obj) {
      if (obj.value == "") {
            obj.value = boxText;
      }
}
//]]></script>
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This article discusses how to implement server side field validation and display customized error messages to the client.
This video teaches users how to migrate an existing Wordpress website to a new domain.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question