删除在文本输入焦点的背景图象 [英] Removing background image on text input focus

问题描述

我有一个文本框如下：

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

我有相应的CSS：

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

现在，当用户点击此文本框时，

Now when user click on this textbox, I would like to remove the image, and when the the textbox is blur, the image showing back.

我尝试过以下类似的操作：

I've tried something like below:

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

but the image remains there? I've tried alert in the function, both blur and focus seems to working fine but images just cant be remove?

推荐答案

为什么不只是纯粹使用CSS？

Why not just purely use CSS?

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

jsFiddle demo here - http://jsfiddle.net/rp5hU/

jsFiddle demo here - http://jsfiddle.net/rp5hU/

或者（如果上面不工作），我会尝试切换一个类，例如

Alternatively (if the above doesn't work), I would try toggling a class, eg

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

和JS

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

为了直接回答你的问题，它不工作的原因是 .css（）应为

To directly answer your question though, the reason it's not working is that the arguments to .css() should be

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

这篇关于删除在文本输入焦点的背景图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！