Clear background if content present in textarea (jQuery)

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

Answers


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

​

$('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


Need Your Help

How to move a sphere over a distance in Unity 3D?

c# unity3d geometry physics collision

I just want to do a collision with spheres.I've got two spheres and one of them moving to the other. At the beginning there is a distance between them and let's say the distance is 5.(Let's say sph...