Can I use jquery to blank textarea fields or ajax like input boxes?

Question

I always use this snippet in my work:

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

Basically it will show a text box with "your email" as the value, when the clicks the text input box - the value becomes blank.. thus they type their email.. if they don't type an email it will reset back to the "your email".

I want to do this or similar with textarea and convert it to jQuery (also the above code in jQuery)?

<textarea name="msg">Message:</textarea><br />

• Andrew: Side note, when creating email inputs, set the type as type="email". All browsers will default to type text when they don't recognize it (even IE6!) and newer browsers (iPhone/android) will provide better input options, ie.keyboard with an @ sign. WIN-WIN!

Answer 1

This ought to do the trick:

Will work for both inputs and textareas -- Whatever default you set for each will persist. Use as is.

See Fiddle here : http://jsfiddle.net/leifparker/DvqYU/2/

(This pulls and stores the default value in a data attribute)

HTML

<textarea>I love bananas ..</textarea>
<textarea>How about you?</textarea>
<input type="text" value="Time for a bath ..">
<input type="text" value=".. because I smell">

JS

$('textarea, input[type=text]')
 .each(function(){ 
 $(this).data('defaultText', $(this).val());
 })
 .focus(function(){
 if ($(this).val()==$(this).data('defaultText')) $(this).val('');
 })
 .blur(function(){
 if ($(this).val()=='') $(this).val($(this).data('defaultText'));
 });

---

EDIT:

An alternative brought up by ANeves, and which makes use of the HTML5 placeholder attribute is below. If you don't care about old browsers, you can use the placeholder HTML on its own (and it works natively, with results similar to the JS above), or otherwise, as below, you'll need to add a JS fallback.

Fiddle here : http://jsfiddle.net/leifparker/DvqYU/14/

HTML

<textarea placeholder="A few words about yourself"></textarea>
<textarea placeholder=".. and a few more about your mangy cat."></textarea>
<input type="text" placeholder="Your Awesome City">
<input type="email" placeholder="[email protected]">

JS

function hasPlaceholderSupport() {
 var input = document.createElement('input');
 return ('placeholder' in input);
}
if (!hasPlaceholderSupport()){
 $('textarea, input[type=text], input[type=email]')
 .each(function(){
 if ($(this).val()=='') $(this).val($(this).attr('placeholder'));
 })
 .focus(function(){
 if ($(this).val()==$(this).attr('placeholder')) $(this).val('');
 })
 .blur(function(){
 if ($(this).val()=='') $(this).val($(this).attr('placeholder'));
 });
}

• ANeves: @leifparker: I suggest using HTML5s placeholder` attribute instead. Would you be so kind as to update the answer? <input type="email" name="address" placeholder="[email protected]">, and $('textarea[placeholder], input[type=text][placeholder]').each() : consult developers.whatwg.org/…
• leifparker: @ANeves Isn't $('textarea[placeholder], input[type=text][placeholder]').each() unnecessary? Wouldn't we rather leave it up to the native HTML5 placeholder, but add a fallback conditional that implements the above answer if they are using an older browser?
• ANeves: Yes, I agree completely; new browsers would show the feature and outdated ones would not = progressive enhancement. But then it would be quite a bit of work for you to edit.
• leifparker: @ANeves Would you agree that this fiddle is the best of both worlds? - jsfiddle.net/leifparker/DvqYU/13 - I'll update the answer if so.
• ANeves: Please: your answer, your call. :) But I agree wholeheartedly. (return ('placeholder' in input);? Wow!) If anything, I would add an if on the .each to only assign to val if the value is empty.

Answer 2

i think you are referring to Placeholder like this:

http://andrew-jones.com/jquery-placeholder-plugin/

Hope it helps.

Answer 3

You could use data attributes for a generic solution that would apply to textareas and input boxes -

HTML

<textarea name="msg" data-notext="text here">Message:</textarea><br />
<input id="email" type="text" data-notext="email here"/>

jQuery

$("textarea, input[type=text]").bind('focus blur', function() {
 if ($(this).val() == '') $(this).val($(this).data('notext'));
})

Demo - http://jsfiddle.net/3jwtA/

Answer 4

Use native html attribute title to specify the mask text, and then apply following script:

html

<input type="text" value="your email" title="your email" /> 
<input type="text" value="your name" title="your name" /> 
<textarea title="your description">your description</textarea>

JS

$('input[type=text], textarea').focus(function() {
 var $ctrl = $(this);
 var title = $ctrl.attr('title');
 $ctrl.removeClass('mask');
 if ($ctrl.val()== title) { 
 $ctrl.val(''); 
 }
}).blur(function() {
 var $ctrl = $(this);
 if ($ctrl.val().length == 0) { 
 var title = $ctrl.attr('title');
 $ctrl.val(title); 
 $ctrl.addClass('mask');
 }
});

And in this case you will need only to provide titles to the controls.

Code: http://jsfiddle.net/pJrG9/7/

Answer 5

This is how I would do it, hope it helps.

HTML

 <input type="text" value="Enter your email:" /> 
 <textarea>Message:< /textarea>

SCRIPT

 $("input[type=text]").focus(function(){
 if($(this).val() == "Enter your email:") $(this).val(""); 
 }).blur(function(){
 if($(this).val() == "") $(this).val("Enter your email:"); 
 }); 
 $("textarea").focus(function(){
 if($(this).val() == "Message:") $(this).val(""); 
 }).blur(function(){
 if($(this).val() == "") $(this).val("Message:"); 
 });