jQuery简单实现动态验证文本框

最新推荐文章于 2020-07-16 13:01:33 发布

凯少_Gentl

最新推荐文章于 2020-07-16 13:01:33 发布

阅读量825

点赞数

文章标签：动态验证文本框 jQuery

<script>
        $(function () {
            $(".inp")
                .each(function () {
                    var oldVal = $(this).val();
                    $(this)
                        .css({ "color": "#888" })
                        //获得焦点
                        .focus(function () {
                            if ($(this).val() != oldVal)
                                $(this).css({ "color": "#000" });
                            else
                                $(this).val("").css({ "color": "#888" });
                        })
                        //失去焦点
                        .blur(function () {
                            if ($(this).val() == "")
                                $(this).val(oldVal).css({ "color": "#888" });
                        })
                        //键盘按下
                        .keydown(function () {
                            $(this).css({ "color": "#000" });
                        });
                });
        });
    </script>

<pre name="code" class="html">    <input type="text" class="inp" id="loginusername" name="loginusername" value="请输入用户名..." />
    <input type="password" class="inp" id="loginpassword" name="loginpassword" value="请输入密码..." />
    <input type="text" class="inp" id="yzm" name="yzm" value="请输入验证码..." />