文本框得到失去焦点

最新推荐文章于 2022-10-15 11:35:19 发布

转载最新推荐文章于 2022-10-15 11:35:19 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/lvhuizhenblog/blog/312262

文章标签：

#python #javascript #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

结果：

代码：

<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        body
        {
            font:normal 12px/17px Arial;
        }
        fieldset
        {
            width:15em;
        }
        div
        {
            padding:2px;
        }
        
        input, textarea
        {
            width:12em;
            border:1px solid #f00;
        }
        
        .focus
        {
            border:1px solid #f00;
            background:#fcc;
        }
    </style>
    
    <!--   引入jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script>
        $(function(){
            $(":input").focus(function(){
                $(this).addClass("focus");
                if($(this).val() == this.defaultValue)
                {
                    $(this).val("");
                }
            }).blur(function(){
                $(this).removeClass("focus");
                if($(this).val() == "")
                {
                    $(this).val(this.defaultValue);
                }
            })
        })
    </script>

</head>

<body>

    <form>
        <fieldset>
            <legend>个人信息</legend>
            <div>
                <label for="username">名称:</label>
                <input id="username" type="text" value="lvhuizhen" />
            </div>
            
            <div>
                <label for="pass">密码:</label>
                <input id="pass" type="password" value="123456">
            </div>
            
            <div>
                <label for="msg">详细信息：</label>
                <textarea id="msg" rows="2" cols="20" >详细信息</textarea>
            </div>
        </fieldset>
    </form>
</body>
</html>

这个例子的详细信息是在《锋利的JQuery》中学习的。

转载于:https://my.oschina.net/lvhuizhenblog/blog/312262