input输入框事件

最新推荐文章于 2024-10-22 10:09:47 发布

原创最新推荐文章于 2024-10-22 10:09:47 发布 · 702 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文介绍了JavaScript中与输入框交互的四个重要事件：focus(获取焦点)，blur(失去焦点)，change(值改变后失去焦点触发)以及input(值实时变化时触发)。这些事件常用于表单验证和用户交互反馈。

focus，获得焦点

<body>
    <input type="text">
    <script>
        const input = document.querySelector('input')
        // 获得输入框焦点时触发
        input.addEventListener('focus', function() {
            console.log('有焦点触发')
        })
    </script>
</body>

blur，失去焦点

<body>
    <input type="text">
    <script>
        // 失去输入框焦点时触发
        input.addEventListener('blur', function() {
            console.log('失去焦点触发')
        })
    </script>
</body>

change，value发生改变后失去焦点触发

<body>
    <input type="text">
    <script>
        // 失去输入框焦点时触发
        input.addEventListener('change', function() {
            console.log('内容发生改变后失去了焦点触发')
        })
    </script>
</body>

input，value发生变化时即触发

<body>
    <input type="text">
    <script>
        // 当value发生变化时，input便会触发
        input.addEventListener('input', function() {
            console.log(input.value); // 打印出来输入的值
        })
    </script>
</body>