原生js实现表单单向绑定

最新推荐文章于 2022-07-11 16:56:31 发布

原创最新推荐文章于 2022-07-11 16:56:31 发布 · 829 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3

这段代码示例展示了如何使用JavaScript监听input输入框的变化，并实时将输入的内容显示到span标签中。通过onchange事件，当input失去焦点时，span会更新其内容。然而，为了实现即时更新，需要修改为oninput事件。

<html>

<head>
  <meta charset=utf-8>
</head>

<body>
  <input id="input" type="text" />   //  input输入框
  <span id="span"></span>			// span 标签显示input内容

  <script type="text/javascript">
    // 补全代码
    let input_id = document.querySelector('#input')  // 获取 input框的dom元素
    let span_id = document.querySelector('#span')   // 获取span标签的dom元素
    input_id.onchange = function(){   // 给input框写上事件
      span_id.innerText = this.value  //  把input 框的内容展示到dom上
    }                               // 注意这里有一个问题，input框内容改变span标签展示内容不是实时改变，需要input框失去焦点，span 标签内容才会改变
  </script>
</body>

</html>