详解input中change、input、keyUP(keyDown)的触发条件

最新推荐文章于 2023-07-19 20:19:53 发布

飘走的落不离

最新推荐文章于 2023-07-19 20:19:53 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/gebieren/article/details/106272163

版权

本文详细解析了HTML中input元素的change、input及keyup事件的触发条件。change事件在输入框失焦或select选择项改变时触发；keyup事件在键盘按键弹起时触发；input事件则在输入内容时实时触发，常用于Vue.js的数据双向绑定。

摘要由CSDN通过智能技术生成

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div id="app">
      <p>msg:{
  {msg}}</p>
      <input type="text" />
    </div>
    <script src="vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: '',
        },
      })
      const input = document.querySelector('input')
      input.value = vm.msg
      console.log(input)
      input.addEventListener('change', function () {
        console.log('触发了change事件')
      })
      input.addEventListener('input', functio

最低0.47元/天解锁文章

飘走的落不离

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
详解input中change、input、keyUP(keyDown)的触发条件

代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style></style&gt
复制链接

扫一扫