Очистить фон, если содержимое присутствует в textarea (jQuery) - PullRequest
Новая
       20

Очистить фон, если содержимое присутствует в textarea (jQuery)

1 голос
/ 02 июля 2010

Пожалуйста, посмотрите это jsFiddle: http://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'));
    }
});

Спасибо за вашу помощь

Ответы [ 2 ]

3 голосов
/ 02 июля 2010

Тег textarea не закрыт, что может быть источником некоторого раздражения:)

Также может быть полезно отделить логику от обратных вызовов focus и blur в отдельную функцию, поскольку для обоих событий должны выполняться одинаковые проверки.

  1. если текстовое поле пусто, показать изображение
  2. в противном случае скрыть изображение

Еще одно преимущество выделения этой логики в отдельную функцию заключается в том, что вы можете вызвать эту новую функцию onload, которая инициализирует текстовую область до того, как произойдет какое-либо событие фокусировки или размытия.

В jsfiddle, когда вы выбираете опцию "onLoad" слева, код JavaScript автоматически включается в обратный вызов window.load, поэтому вам не нужно указывать его в коде. Либо так, либо выберите параметр "No wrap", чтобы самостоятельно написать событие window.load в коде.

Обновление скрипки : 

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

​
0 голосов
/ 02 июля 2010 
$('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 

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

обновленная версия демо

...