jquery - 删除文本输入焦点上的背景图像

Question

我有一个如下文本框：

<input type="text" name="fname" class="username" id="fname">

我有相应的CSS：

.username {
    background:#FFFFFF url(images/admin4.png) no-repeat;
    width: 256px; height: 24px
} 

现在，当用户单击此文本框时，我想删除图像，当文本框模糊时，图像会显示回来。

我尝试过如下方法：

$( document ).ready(function() {
  $('#fname').focus(
  function(){
    $(this).css({'url' : ''});
});

但图像仍然存在？我已经在该功能中尝试过警报，模糊和焦点似乎都可以正常工作，但图像无法删除？

Answer 1

为什么不直接使用 CSS？

.username:focus {
    background-image: none;
}

jsFiddle 演示在这里 - http://jsfiddle.net/rp5hU/

---

或者（如果上述方法不起作用），我会尝试切换一个类，例如

.username.focus {
    background-image: none;
}

和 JS

$('#fname').on({
    'focusin': function() {
        $(this).addClass('focus');
    },
    'focusout': function() {
        $(this).removeClass('focus');
    }
});

不过，要直接回答您的问题，它不起作用的原因是.css()应该是

...css('backgroundImage', 'none')

Answer 2

尝试这个：

  $( document ).ready(function() {
      $('#fname').focusin(
      function(){
        $(this).css('background-image', 'none');
    });

    $('#fname').focusout(
      function(){
        $(this).css('background-image', 'url(images/admin4.png)'); 
    });

});