Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2007-11-21
6
Medium Priority
?
1,444 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 2000 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

610 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