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

Answer 2

我认为你最有可能从firebug复制的'scroll'位是jQuery的绊倒。当我尝试你的代码时，它会工作。另一件事可能是图像的路径。

<!doctype html>
<html>
<head>
    <title></title>
    <style type="text/css">

    </style>
</head>
<body>

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function() {
    $('#edit-submitted-full-name').focus(function(){

        $(this).css({background:'#FF00FF'});

     });

     $('#edit-submitted-full-name').blur(function(){
      if ($(this).val() == '') {
      $(this).css({background:'url(http://www.google.ae/images/srpr/nav_logo14.png) no-repeat 7px 5px #FFFFFF'});
      };
     });

    })
</script>
</body>
</html>

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

2 个答案: