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

});

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

2 个答案: