?
Solved

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

Posted on 2007-11-21
6
Medium Priority
?
1,443 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
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

 
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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 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