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