CODEWITHSUNDEEP
jquerytextareaonbluronfocus
TheBlackBenzKid
TheBlackBenzKid

Reputation: 27105

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

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

Upvotes: 2

Views: 1465

Answers (5)

leifparker
leifparker

Reputation: 844

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

Upvotes: 3

nouky
nouky

Reputation: 65

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

Upvotes: 0

Samich
Samich

Reputation: 30175

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/

Upvotes: 0

ipr101
ipr101

Reputation: 24236

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/

Upvotes: 0

workdreamer
workdreamer

Reputation: 2856

i think you are referring to Placeholder like this:

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

Hope it helps.

Upvotes: 0

Related Questions