Question

I have some JQuery that isn’t working and I need a little help. I a few forms on my website, and they all have a textarea with the class “.form-textarea”. What I’m trying to do is use JQuery to get the default value of the textarea, clear the value on focus and reinstate the original value if the the textarea is empty. I realise that an ID would probably be better but I need a generic function to affect all of the textareas with this particular class.

$(document).ready(function()
{
var def = $(".form-textarea")
$(".form-textarea").focus(function(srcc)
{
  if ($(this).val() == def)
    {
      $(this).removeClass("defaultTextActive");
      $(this).val("");
    }
});

$(".form-textarea").blur(function()
{
  if ($(this).val() == "")
    {
      $(this).addClass("defaultTextActive");
      $(this).val(def);
    }
});

$(".defaultText").blur();        
});

Answer 1

This is an old method I used for the exact same purpose. I believe this is what you’re looking for (uses Textareas) : Live demo

This uses the jQuery data API. I’ve also added an extra class so you can markup your text nicely (disabled_text). This is a general purpose method so all you need to do is add the suggest class to your textarea/input and the script will do the rest

<textarea class='suggest'>Some default value</textarea>
<textarea class='suggest'>Some default value2</textarea>
<textarea class='suggest'>Some default value3</textarea>
<input type='text' value ='me too' class='suggest'>

$('.suggest').each(function() {
        $this = $(this);
    if ($this.val() != '') {
        return;
    }
    $this.data('defaultval', $this.val());

    $this.addClass('disabled_text').focus(function() {

        if ($this.val() == $this.data('defaultval')) {
            $this.val('');

        }
        $this.removeClass('disabled_text');
    }).blur(function() {
        var oldVal = ($this.data('defaultval')) ? $this.data('defaultval') : '';
        if ($this.val() == '' && oldVal != '') {
            $this.addClass('disabled_text').val(oldVal);
        }
    })
});