原生js实现数据同步（oninput）

最新推荐文章于 2023-10-25 14:54:49 发布

dichen0168

最新推荐文章于 2023-10-25 14:54:49 发布

阅读量296

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/missmissmiss/p/8673436.html

版权

<!DOCTYPE html>
<html>
<head>
  <title>同步显示</title>
  <meta charset="utf-8">
</head>
<body>
  <div>
    <input type="text" name="user_input">
    <span id="content">你输入的内容是：</span>
  </div>
  <script type="text/javascript">
    var de = document.getElementById("content");
    var txt = de.innerHTML;
    document.getElementsByTagName("input")[0].oninput = function () {
      document.getElementById("content").innerHTML = txt+this.value;
    }
  </script>
</body>
</html>

1，这里使用input的text类型，oninput事件会在文本框获得焦点期间处于持续触发状态，直到失去焦点。

2，若使用onchange事件，会在输入完成后按下回车，或者点一下其他位置才会触发，说明onchange事件在文本框获得焦点时就绪，在失去焦点时才触发，所以不能实现在每输入一个新字符时将内容同步到span标签内。

ps：如果写成：

document.getElementById("content").innerHTML += this.value;

这行代码会导致文本框的值反复的被添加到span，所以提前声明一个txt，保存初始值，写成如下

 document.getElementById("content").innerHTML = txt+this.value;

转载于:https://www.cnblogs.com/missmissmiss/p/8673436.html

dichen0168

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现数据同步（oninput）

<!DOCTYPE html><html><head> <title>同步显示</title> <meta charset="utf-8"></head><body> <div> <input type="text" name=...
复制链接

扫一扫