小女子12行代码实现Javascript双向数据绑定两个input框

最新推荐文章于 2023-03-16 17:36:50 发布

阿嘉Jared

最新推荐文章于 2023-03-16 17:36:50 发布

阅读量1.3k

点赞数

文章标签： Vue 前端

本文链接：https://blog.csdn.net/Maryshaw/article/details/100087813

版权

首先是案例展示:

file 实现过程,详细内容在代码中注释了.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <input id="a" type="text" />
    <input id="b" type="text" />
    <script>
      // 获取两个input元素
      var a = document.querySelector("#a");
      var b = document.querySelector("#b");
      var obj = {};
      //input框输入过程中修改obj的name属性值,修改成鼠标抬起时所修改的那个值
      document.onkeyup = function(e) {
        obj.name = e.target.value;
      };
      //利用对象的defineProperty属性中的set方法将修改了的name属性值绑定到两个input框属性上
      Object.defineProperty(obj, "name", {
        set: function(e) {
          b.value = e;
          a.value = e;
        }
      });
    </script>
  </body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿嘉Jared

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小女子12行代码实现Javascript双向数据绑定两个input框

首先是案例展示: 实现过程,详细内容在代码中注释了. <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1...
复制链接

扫一扫