如果文本区域中存在内容，则清除背景（jQuery）

请参阅此JSFIDLE：

我有一个文本区域，它有一个背景图像，它在“焦点”上被删除，在“模糊”上被恢复，但当内容出现在文本区域时，它在任何情况下都不应该显示，但我不能用这个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'));
    }
});

谢谢你的帮助

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

编辑：根据评论，我修改了代码

css html

---

文本区域的

标记未关闭，这可能会引起一些麻烦：）

另外，将
focus
和
blur
回调中的逻辑分解成一个单独的函数可能会有所帮助，因为两个事件都需要进行相同的检查

如果textarea为空，则显示图像
否则隐藏图像
在单独的函数中分解此逻辑的另一个优点是，您可以调用此新函数onload，它将在任何焦点或模糊事件发生之前初始化textarea

在JSFIDLE上，当您选择左侧的
“onLoad”
选项时，JavaScript代码会自动包装在window.load回调中，因此您不必在代码中指定它。或者选择
“No wrap”
选项以自己编写代码中的window.load事件

:

令人惊叹的。这几乎可以工作，但当内容已经存在（例如
默认值）或动态插入（文件上载）时，它会失败。此外，当内容再次从textarea中删除（即完全为空）时，背景不会再次出现。textarea是否有默认值？是的，textarea是否有默认值。另一个接受文件输入并显示在textarea中。呃，谢谢，但是：1）每个textarea的背景都不同，因此单个类不起作用2）当文本出现时，背景不应该显示，在您的演示中是这样的。3） 一旦（onchange？）文本区域为空，恢复背景。
#mytextarea {
    width:300px;
    height:200px;
    border:1px solid #000;
    
}
.bg {
    background:url('http://img821.imageshack.us/img821/2853/writeus.gif') center no-repeat;
}

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

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

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

​