[js笔记] focus和blur事件之表单验证

最新推荐文章于 2024-02-11 09:00:00 发布

gamedev˚

最新推荐文章于 2024-02-11 09:00:00 发布

阅读量3.7k

点赞数 1

分类专栏：【编程语言】➣ js 文章标签： javascript DOM 表单

欢迎转载，注明作者和出处就好！如果有任何问题或文章存在明显的谬误，请留言说明原因谢谢，我也可以知道原因，不断进步！

本文链接：https://blog.csdn.net/Coder__CS/article/details/71023712

版权

【编程语言】➣ js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

focus 当一个元素获得焦点时，这个DOM节点会触发focus事件
blur 当一个元素失去焦点时，这个DOM节点会触发blur事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
</head>
<body>
    <form method="post" action="#">
        <label for="username">Create a userName:</label> <input type="text"
            id="username" />
        <div id="feedback"></div>

        <label for="password">Create a password:</label> <input
            type="password" /> <br> <input type="submit" value="Sign up!" />
    </form>

<script type="text/javascript">
    function checkUsername() {
        var username = el.value;
        if (username.length < 5) {
            elMsg.className = 'Warning';
            elMsg.textContent = 'Not long enough, yet...';
        } else {
            elMsg.textContent = '';
        }
    }

    function tipUsername() {
        elMsg.className = 'tip';
        elMsg.innerHTML = 'Username must be at least 5 characters';
    }

    var el = document.getElementById('username');

    var elMsg = document.getElementById('feedback');
    // focus事件，节点获得焦点时被触发
    el.addEventListener('focus', tipUsername, false);
    // blur事件，节点失去焦点时被触发
    el.addEventListener('blur', checkUsername, false);
</script>
</body>
</html>

gamedev˚

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[js笔记] focus和blur事件之表单验证

focus 当一个元素获得焦点时，这个DOM节点会触发focus事件blur 当一个元素失去焦点时，这个DOM节点会触发blur事件<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http
复制链接

扫一扫