程序博客网 > 手机网页翻译软件

form表单字段元素对象实例（二）— —用户名和密码争夺焦点，造成死锁事件

来源：互联网发布：手机网页翻译软件编辑：程序博客网时间：2024/04/30 01:08

如果用户名输入文本框失去焦点时的事件处理程序检查到用户名为空，将焦点移回到用户名输入文本框上；如果密码输入框失去焦点时的事件处理程序检查到密码为空，也将焦点移回到密码输入文本框上，这样，将产生死锁的现象。

    <script type="text/javascript">
        function checkName(frm) {
            if (frm.user.value == "") {
                alert("用户名不能为空");
                frm.user.focus();
            }
        }
        function checkPwd(frm) {
            if (frm.pwd.value == "") {
                alert("用户名不能为空");
                frm.pwd.focus();
            }
        }
    </script>
</head>
<body>
    <form method="post" action="">
    用户名：<input id="txtSname" name="user" onblur="checkName(this.form)" type="text" /><br />
    密码 ：<input id="txtPwd" name="pwd" onblur="checkPwd(this.form)" type="text" /><br />
    <input id="btnOK" type="submit" value="提交" />
    </form>
</body>
</html>
         先单击用户名输入框，再单击密码输入文本框，在这个过程中，密码输入文本框得到焦点的同时，用户名输入文本框失去焦点，程序把焦点移回到用户名输入框；当程序把焦点移回到用户名输入文本框的同时，密码输入文本框失去了焦点，程序又将焦点移回到密码输入文本框。这两个文本输入框来回争夺焦点，就形成了死锁状态。

为事件处理函数传递参数，其主要作用就是为了实现函数的通用性和便于在事件处理函数中访问操作的HTML元素对象。针对上卖弄的例子，将From表单对象作为参数传递给事件处理函数的方式并不是很好，而直接将用户名或密码文本输入框作为参数传递给事件处理函数的方式会更好。

    <script type="text/javascript">
        function checkValue(textFeild) {
            if (textFeild.value == "") {
                alert("您还没有在文本框中输入内容");
                textFeild.focus();
            }
        }
    </script>
</head>
<body>
    <form method="post" action="">
    用户名：<input id="txtSname" name="user" onblur="checkValue(this)" type="text" /><br />
    密码 ：<input id="txtPwd" name="pwd" onblur="checkValue(this)" type="text" /><br />
    <input id="btnOK" type="submit" value="提交" />
    </form>
</body>
</html>

弊端：这样做必须在一个文本输入框失去焦点后在该文本输入框中输入内容，否则会出现问题。

手机网页翻译软件

手机网页翻译软件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子烫起泡了怎么办被烫起泡了怎么办烧的拼音怎么写写24遍对方的名字烧了的效果烧包烧包什么意思烧包是什么意思麦烧的做法麦烧做法烧卖骑士作品烧卖做法糯米烧卖烧卖的做法烧卖怎么做烧卖图片黄金比例烧卖烧卖热量烧卖歌曲糯米烧卖做法烧卖皮怎么做烧卖皮小莫烧卖烧卖的做法大全图解烧仙草哪里有卖下沙烧卖烧卖解说鲨鱼烧卖烧卖的制作方法怎么包烧卖褶子图解做烧卖如何做烧卖烧卖做法大全带图解怎么做烧卖怎样做烧卖烧卖怎么包烧卖怎么包图解学做烧卖香菇烧卖珍珠烧卖羊肉烧卖鲜虾烧卖