CODEWITHSUNDEEP
javascripthtmlcssinputfocus
James
James

Reputation: 1925

How to have text already in the input and off when on focus?

Please check out the jsfiddle link below:

http://jsfiddle.net/H49EC/1/

As you can see it is two search boxes with a button below it. How can I have it so text is in each box but when each box is clicked the text disappears?

Also if the box is clicked but nothing is entered the text reappears.

Thanks guys, I have been searching but I am unsure of what this is called or what language needs to be used.

Thanks again!

James

Upvotes: 1

Views: 1742

Answers (7)

Kyle
Kyle

Reputation: 67194

IF you're using HTML5 you can use the new placeholder="" attribute:

placeholder="Your text here"

http://jsfiddle.net/H49EC/2/

If you're not using HTML5, you can use jQuery to change the value: (for older browsers and IE)

$('input').focus(function(){        
            // on focus if the value of the field is still the initial then clear it        
            if ( (this.value) == this.defaultValue ) this.value = '';    }).blur(function(){        
            // on blur if the value is still cleared then restore the initial        
            if ( (this.value) == '' )   this.value = this.defaultValue;    })

http://jsfiddle.net/H49EC/7/

Upvotes: 2

ryryan
ryryan

Reputation: 3928

Placeholder is what you're looking for.

<input type="text" name="searchText" placeholder="Search Here!" />

See W3Schools for information regarding the placeholder attribute.

And here's a quick jsFiddle.

Upvotes: 0

Graeme Leighfield
Graeme Leighfield

Reputation: 2985

This link offers support on the placeholder attribute.

Its not completely cross browser compliant at the moment, IE is the main issue.

http://davidwalsh.name/html5-placeholder-css

For IE people are making divs above them and when you click it hides. There are plenty of options on google by typing in placeholder :)

Hope this helps!

Upvotes: 0

James Allardice
James Allardice

Reputation: 165941

If you need to support older browsers and can't use the HTML5 placeholder attribute, you will need to use JavaScript. Something along these lines should get you started:

var input = document.getElementById("input1");
input.onfocus = function() {
    if(this.value === "Default") {
        this.value = "";  
    }
};
input.onblur = function() {
    if(this.value === "") {
        this.value = "Default"; 
    }  
};

Here's an updated fiddle to show you how it works. Note that I've added an id to the input element so it can be accessed with getElementById. If you want to apply this to multiple input elements, you may want to generalise it instead of applying it to just the one element.

Upvotes: 1

korywka
korywka

Reputation: 7653

do u mean placeholder? http://jsfiddle.net/H49EC/4/

Upvotes: 0

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103135

I used infieldlabel to accomplish this on a page once and it worked well. Hoever, it is a jQuery plugin.

Upvotes: 0

ValeriiVasin
ValeriiVasin

Reputation: 8706

Use placeholder attribute on your inputs.

<input type='text' placeholder='whatever' />

Upvotes: 2

Related Questions