Can I use jquery to blank textarea fields or ajax

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

Answer 1

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:");        
    });

Answer 2

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 3

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 4

i think you are referring to Placeholder like this:

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

Hope it helps.

Answer 5

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="[e-mail]">

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'));
        });
}