Solved

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

Posted on 2007-11-21
6
1,439 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
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

813 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now