Сделать фоновое изображение поля ввода исчезнувшим после ввода текста

Question

Я бы хотел, чтобы фоновое изображение для моего поля ввода исчезло, как только пользователь ввел в него любое количество текста. Есть ли простой способ сделать это в JavaScript? Я могу получить его, так что bg исчезает, когда поле сфокусировано, но затем возвращается, когда они переходят к следующему полю.

HTML:
Call me at <input name="phone" type="text" class="phone-field" id="phone">
CSS:

.form input {
  background-color:transparent;
}
.form input:focus {
  background-color:#edc;
  background-image:none;
}
input.phone-field {
  background-image: (url/images/phonebg.png);
  background-repeat: no-repeat;
  background-position: left 1px;
}

Answer 1

$("#inputId").focus(function() {
   if ($(this).value != "") {
     $(this).css("background-image", "none");
   }
}).blur(function() {
   if ($(this).value == "") {
      $(this).css("background-image", "url(/images/phonebg.png)");
   }
});

Answer 2

Или для максимальной совместимости браузера (хм, IE):

$("input.phone-field").change(function() { $.trim($(this).val()) != "" ? $(this).toggleClass("bg", false) : $(this).toggleClass("bg"); });

И разметка:

<input type="text" class="phone-field bg" />

Просто добавьте CSS-код фонового изображения в селектор ".phone-field.bg".

Это удалит фон, как только будет введен какой-то текст (и вернет его, если текст не введен).

Answer 3

с jquery, вы можете сделать что-то вроде

 $('#phone').focus(function(){
     var text = $(this).val();   
     if(text != ''){
        $(this).css('background-image', 'none');       
     }
 });

Answer 4

$('#inputId').focus(function(){
    var newValue = $(this).val();
    if ($(this).val() == ""){
        $(this).css("background-image", "none");
    }else{
        $(this).val(newValue);
    }
}).blur(function(){
    var newValue = $(this).val();
    if ($(this).val() == ""){
        $(this).css("background-image", "url(/images/phonebg.png)");
    }else{
        $(this).val(newValue);
    }
});