CODEWITHSUNDEEP
javascriptformsinputhideshow
Michal Kopanski
Michal Kopanski

Reputation: 353

How to show/hide input value on focus?

I see this all over the web, but was wondering if anyone has the JavaScript code for the EASIEST way to show input value on blur, but hide in on focus.

Upvotes: 5

Views: 69657

Answers (7)

Sakata Gintoki
Sakata Gintoki

Reputation: 1825

For all browsers:

<input onfocus="if(this.value == 'Your value') { this.value = '';}" onblur="if(this.value == '') { this.value = 'Your value';}" value="Your value" type="text" name="inputname" />

For newest version of browsers:

<input type="text" name="inputname" placeholder="Your value" />

Upvotes: 0

teeth
teeth

Reputation: 225

Since this still comes up on google, I'd like to point out that with HTML 5 you can use the placeholder attribute with an input to achieve this in one piece of html.

<input type="text" id="myinput" placeholder="search..." />

Placeholder is now standard across modern browsers, so this really would be the preferred method.

Upvotes: 17

Milan Jaros
Milan Jaros

Reputation: 1147

I prefer jQuery way:

$(function(){
    /* Hide form input values on focus*/ 
    $('input:text').each(function(){
        var txtval = $(this).val();
        $(this).focus(function(){
            if($(this).val() == txtval){
                $(this).val('')
            }
        });
        $(this).blur(function(){
            if($(this).val() == ""){
                $(this).val(txtval);
            }
        });
    });
});

It is modified Hide Form Input Values On Focus With jQuery by Zack Perdue.

Upvotes: 7

JLGarcia
JLGarcia

Reputation: 336

This always worked for me:

<input 
    type="text" 
    value="Name:"
    name="visitors_name" 
    onblur="if(value=='') value = 'Name:'" 
    onfocus="if(value=='Name:') value = ''"
 />

Upvotes: 17

Maciej Łebkowski
Maciej Łebkowski

Reputation: 3887

If you don’t care about valid HTML, you use the placeholder attribute. It will work out of the box on a Safari, and you can add some unobtrusive JS to mimic this behavior in other browsers.

More reading:

And google. ;-)

The solution is similar to the one Josh Stodola posted, but it’s more flexible and universal.

Upvotes: 1

Fredrik M&#246;rk
Fredrik M&#246;rk

Reputation: 158309

The simplest approach I know of is the following:

<input 
    name="tb" 
    type="text" 
    value="some text"
    onblur="if (this.value=='') this.value = 'some text'" 
    onfocus="if (this.value=='some text') this.value = ''"  />

Upvotes: 5

Juri
Juri

Reputation: 32900

This is what I use on my blog. Just go there and check out the source code behind.

function displaySearchText(text){
    var searchField = document.getElementById('searchField');
    if(searchField != null)
        searchField.value = text;
}

Your input field should look something like this:

<input id='searchField' name='q' onblur='displaySearchText("Search...");' onfocus='displaySearchText("");' onkeydown='performSearch(e);' type='text' value='Search...'/>

Upvotes: 0

Related Questions