Ясный фон, если содержание, существующее в текстовой области (jQuery)
Посмотрите этот 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 ответа
Тег textarea не закрыт, что может быть источником некоторого раздражения :)
Также может быть полезно исключить логику из Обратные вызовы focus и blur выделены в отдельную функцию, поскольку для обоих событий должны выполняться одинаковые проверки.
- если текстовое поле пусто, показать изображение
- иначе скрыть изображение
Еще одно преимущество выделения этой логики в отдельную функцию заключается в том, что вы можете вызвать эту новую функцию onload, которая инициализирует текстовое поле перед любым фокусом или размытием. событие произошло.
В jsfiddle, когда вы выбираете опцию «onLoad» слева, код JavaScript автоматически включается в обратный вызов window.load, поэтому вам не нужно указывать его в коде. Либо так, либо выберите вариант «Без переноса» , чтобы самостоятельно записать событие 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');
$('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');
}
});