JQuery实现“请输入关键字”文本框的输入特效

最新推荐文章于 2018-11-05 13:56:27 发布

原创最新推荐文章于 2018-11-05 13:56:27 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #xhtml #html #class

JQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用HTML和jQuery实现的输入框提示效果。当用户点击输入框时，预设的提示文字消失，方便用户输入内容；当用户离开输入框且未输入任何内容时，提示文字会重新出现。这种效果有助于提升用户体验。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type ="text/css" >
    .text{ color :Gray;}
    </style>
    <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type ="text/javascript" >
        $(function() {
            $("#txt").focus(function() {
                if ($(this).val() == "请输入关键字")
                    $(this).val("");
                $(this).removeClass("text");
            }).blur(function() {
            if ($(this).val() == "") {
                    $(this).val("请输入关键字"); $(this).addClass("text");
                }


            })
        })
    </script>
</head>
<body>
<input type ="text" value ="请输入关键字" id="txt" class ="text" />
</body>
</html>