jquery遇到的坑

最新推荐文章于 2021-11-18 11:00:39 发布

原创最新推荐文章于 2021-11-18 11:00:39 发布 · 252 阅读

CC 4.0 BY-SA版权

本文解决了一个在使用jQuery时常见的错误，即如何正确处理输入框的聚焦与失焦事件，以实现密码框的显示与提示信息的切换。通过对比错误与正确的代码示例，展示了如何避免使用不存在的onfocus方法，转而使用jQuery的focus和blur方法。

jquery遇到的坑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
密码：<input type="password" name="password" placeholder="密码">
<script src="jquery-1.12.4.js"></script>
<script>

    $(function () {
        $("input").onfocus(function () {
                this.value='';
                this.type='password';
        });
        $("input").onblur(function () {
                this.type = 'text';
                this.value = '请输入密码';
        })
    });

</script>
</body>
</html>

这个是报错的，

由于在juery中对方法进行了封装，没有了onfocus方法

所以需要修改代码变成一下：

  $(function () {
        $("input").focus(function () {
                this.value='';
                this.type='password';
        });
        $("input").blur(function () {
                this.type = 'text';
                this.value = '请输入密码';
        })
    });