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

Posted on 2007-11-21
Medium Priority
Last Modified: 2010-04-21

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,
Question by:net-workx
LVL 21

Expert Comment

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

Expert Comment

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

Hope this helps!

Accepted Solution

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...';" />
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.


Expert Comment

ID: 20331243

Author Closing Comment

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...
LVL 14

Expert Comment

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.

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

<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;

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Before you approach an Ionic Mobile App development company for developing mobile apps using the ionic framework, you must know why you should choose the framework. Let's try to understand that through this article.
These seven tips can help you create an extraordinary website, one that captivates audiences and has them wanting to return regularly for more. Keep reading to find out what your site is missing and what you need to add!
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…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

600 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