jquery - 如何使用jquery在文本框中添加背景图像

Question

我有一个文本框，我想更改焦点上的水印。

请指正:

$('body').ready(function() {
    $('#edit-submitted-full-name').focus(function() {
        $(this).css({background:'#FFFFFF'});
    });

    $('#edit-submitted-full-name').blur(function() {
        if ($(this).val() == '') {
            $(this).css({background:'url("images/text_fullname.png") no-repeat scroll 7px 5px #FFFFFF'});
        };
    });
});

Answer 1

您可以使用 css 类更干净地执行此操作，而不必处理图像的路径。如果您将一个名为“hintable”的新 css 类添加到您想要或不想要的所有内容中，它会更好。

HTML

<input type="text" id="edit-submitted-full-name" name="edit-submitted-full-name" class="hintable" value="" />

CSS:

#edit-submitted-full-name.hint 
{
    url(../images/text_fullname.png) no-repeat scroll 7px 5px #FFFFFF; 
}

#some-other-input.hint 
{
    url(../images/text_someother.png) no-repeat scroll 7px 5px #FFFFFF; 
}

然后您的代码将如下所示:

$(function(){
    $(".hintable").each(function(){
        ToggleHint($(this)); // add class on page load to elements with "hintable" class
    });        

    $(".hintable").focus(function(){
        $(this).removeClass("hint"); // handle all focus hints
    });

    $(".hintable").blur(function(){
        ToggleHint(this); // handle all blur hints
    });
});

function ToggleHint(obj)
{
    if ($(obj).val() == '') { $(obj).addClass("hint"); };
}