Clear background if content present in textarea (jQuery)

Question

Please see this jsFiddle: http://jsfiddle.net/Wmq6f/

I have a textarea that has a background image, it is removed on 'focus' and restored on 'blur' but when the content is present in the textarea it should not show in either case, but I can't achieve that with this jQuery:

$('textarea').focus(function() {
   var $this = $(this);
   $.data(this, 'img', $this.css('background-image'));
   $this.css('background-image', 'none');
});
$('textarea').blur(function() {
    if($.trim($('textarea').val()).length){
         $this.css('background-image', 'none');
    } else {
        $(this).css('background-image', $.data(this, 'img'));
    }
});

Thanks for your help

Answer 1

$('textarea').focus(function() {
   var $this = $(this);
   $.data(this, 'img', $this.css('background-image'));
   $this.css('background-image', 'none');
});
$('textarea').blur(function() {
    var $this = $(this); // you forgot this line...
    if($.trim($($this).val()).length){
         //       ^----- do not use 'textarea'
         $this.css('background-image', 'none');
    } else {
        $(this).css('background-image', $.data(this, 'img'));
    }
});

updated working version of your link

edit: based on comment I modified the code...

css

#mytextarea {
    width:300px;
    height:200px;
    border:1px solid #000;

}
.bg {
    background:url('http://img821.imageshack.us/img821/2853/writeus.gif') center no-repeat;
}

html

<textarea id="mytextarea" class="bg">help!</textarea>​

jQuery

$('textarea').focus(function() {
    $(this).removeClass('bg');
});
$('textarea').blur(function() {
    var $this = $(this);
    if($.trim($this.val()).length && $.trim($this.val()) != this.defaultValue ){
        $(this).removeClass('bg');
    } else {
        $(this).addClass('bg');
    }
});

udated version of demo

Answer 2

The textarea tag isn't closed which can be a source of some annoyance :)

Also it might be helpful to factor out the logic from focus and blur callbacks into a separate function as the same checks need to happen on both events.

1. if textarea is empty, show image
2. otherwise hide image

Another advantage of factoring this logic out in a separate function is that you can call this new function onload, which will initialize the textarea before any focus or blur event happen.

On jsfiddle, when you choose the "onLoad" option on the left, the JavaScript code is automatically wrapped in a window.load callback, so you don't have to specify it in code. Either that or choose the "No wrap" option to write the window.load event in code yourself.

Fiddle update:

function init(text) {
    text = $(text);
    text.data('img', text.css('background'));

    var update = function() {
        if(text.val() == '') {
            text.css('background', text.data('img'));
        }
        else {
            text.css('background', 'none');
        }
    };

    text.focus(update);
    text.blur(update);

    update();
}

init('textarea');

​