onfoucs和onblur

作者: 椰果粒 | 来源:发表于2018-07-11 14:58 被阅读5次

    一个例子

    <html>
        <head>
            <title>Blur focus事件</title>
            <meta charset="utf-8">
        </head>
        <body>
            <script type = "text/javascript">
                /*
                * 实现的功能:
                *   当用户点击框准备输入时(focus),将输入框内的东西置为空
                *   当用户离开(blur)时,检验输入的内容是否符合要求
                *
                * */
                function ClearUser(){
                    document.formUser.txtUser.value = "";
                }
                function ClearPsd(){
                    document.formUser.txtPsd.value = "";
                }
                function CheckUser(){
                    if (document.formUser.txtUser.value == "user") {
                        document.formUser.txtPsd.focus();
                    }
                }
                function CheckPsd(){
                    if (document.formUser.txtPsd.value == "123456") {
                        alert("输入的密码正确");
                    }
                }
            </script>
    
            <form name = "formUser">
                <input type="text" name="txtUser" value="请输入用户名" onblur="CheckUser()" onfocus="ClearUser()"/>
                <input type="text" name="txtPsd" onblur="CheckPsd()" onfocus="ClearPsd()">
            </form>
        </body>
    </html>
    

    知识点

    1、获取input的输入值:

    // 原生方式
    document.表单的name.input的name.value
    // jquery方式
    $("#username").val()
    

    相关文章

      网友评论

        本文标题:onfoucs和onblur

        本文链接:https://www.haomeiwen.com/subject/dfyhpftx.html