文本输入焦点

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

});