【问题标题】：Clear background if content present in textarea (jQuery)如果文本区域中存在内容，则清除背景（jQuery）
【发布时间】：2011-03-11 00:23:51
【问题描述】：

请看这个 jsFiddle：https://jsfiddle.net/Wmq6f/

我有一个带有背景图像的文本区域，它在“焦点”时被删除并在“模糊”时恢复，但是当文本区域中存在内容时，它不应该在任何一种情况下显示，但我无法实现使用这个 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'));
    }
});

感谢您的帮助

【问题讨论】：

标签： jquery focus background textarea

【解决方案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

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

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

【讨论】：

太棒了。这几乎可以工作，但是当内容已经存在（例如<textarea>default value</textarea>）或动态插入（文件上传）时，它会失败。此外，当再次从 textarea 中删除内容时，即完全为空，背景不会再次出现。
你有textarea的默认值吗？
是的，textarea 有一个默认值。另一个接受文件输入并显示在文本区域中。
呃，谢谢，但是：1）每个文本区域的背景都不同，因此单个类不起作用 2）当文本存在时，不应显示背景，在您的演示中它会显示。 3）一旦（onchange？）textarea为空，恢复背景。

【解决方案2】：

textarea 标签未关闭，这可能会引起一些烦恼:)

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

如果 textarea 为空，则显示图片
否则隐藏图片

将这个逻辑分解到一个单独的函数中的另一个好处是，您可以调用这个新函数 onload，它将在任何焦点或模糊事件发生之前初始化文本区域。

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

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

【讨论】：