用jquery实现输入框消失文字

最新推荐文章于 2024-07-30 17:09:59 发布

wentao365

最新推荐文章于 2024-07-30 17:09:59 发布

阅读量125

点赞数

分类专栏：网站前台文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/wentao365/article/details/84424701

版权

网站前台专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<html>
<head>
    <title>用jquery实现输入框消失文字</title>
    <style type="text/css">
        .default {
            font-weight: bold;
            color: #787878;
        }
    </style>
    <script type="text/javascript" src="/js/jquery/jquery-1.8.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#keywords").focus(function () {
                var $this = $(this);
                if ($this.val() == $this[0].defaultValue) {
                    $this.css("color","#0cf").val("");
                }
            }).blur(function () {
                var $this = $(this);
                if ($this.val() == "") {
                    $this.removeAttr("style").val($this[0].defaultValue);
                }
            })//keywords
        });
    </script>
</head>
<body>
<div id="content">
    <form method="POST" id="user" action="">
        User Name:<input type="text" id="keywords" class="default" name="keywords" value="Enter your name"/><br/>
        PassWord:<input type="text" id="password" class="default" name="password" value="Enter your password"/>
        <input type="submit" name="sub" value="login"/>
    </form>
</div>
</body>
</html>

[img]http://dl.iteye.com/upload/attachment/0083/8218/d6f3e157-330d-33be-9245-4e354e1d18e9.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/0083/8220/9fc580f5-aa0b-3e2a-9f9c-4620591e5d98.jpg[/img]

wentao365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jquery实现输入框消失文字

[code="java"] 用jquery实现输入框消失文字 .default { font-weight: bold; color: #787878; } $(document).ready(function() { ...
复制链接

扫一扫

专栏目录