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

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

});