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

首先是案例展示:

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

<!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>

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

10行代码-原生JS双向数据绑定演示
很简单的10行代码就可以实现输入框与页面实时显示的绑定,也就是百度一下一大堆的所谓的双向数据绑定,完全没有必要搞那么长 function test() {const container = docum ...
html实现安卓手机重启,这12行代码分分钟让你电脑崩溃手机重启
事情的起因是这样的,国外一哥们Cyber Security在推特上发了这么一条推文: 高能!这12行代码分分钟让你的电脑崩溃手机重启神秘的12行代码这哥们声称,如果你使用上述这段12行的JavaS ...
html崩溃手机代码15,这12行代码分分钟让你电脑崩溃手机重启
事情的起因是这样的,国外一哥们Cyber Security在推特上发了这么一条推文: 神秘的12行代码(图片来自0xroot) 这哥们声称,如果你使用上述这段12行的JavaScript代码,就可以能 ...
作死的神秘12行代码：分分钟让你电脑崩溃手机重启
查看原文:http://www.ibloger.net/article/313.html 最近,一段神秘的12行代码在国外社交网络上火了起来,据说能让你的浏览器瞬间崩溃,iPhone秒重启.到底是什么 ...
12行代码AC——L1-058 6翻了(15分)
立志用更少的代码做更高效的表达 "666"是一种网络用语,大概是表示某人很厉害.我们很佩服的意思.最近又衍生出另一个数字"9",意思是"6翻了&quo ...
保存blob到本地_用12行代码提取浏览器自动保存的密码
在本文中,我将演示如何轻松提取Chrome配置文件中保存的用户名和密码.有人可能会认为Chrome会加密自动保存的密码,但并非如此.当你在使用Chrome时,往往需要输入某个密码才能同步自动保存的密码 ...
python小游戏-16行代码实现3D撞球小游戏！-源码下载
python小游戏-16行代码实现3D撞球小游戏!-源码下载所属网站分类: 资源下载 > python小游戏作者:搞笑链接: http://www.pythonheidong.com/bl ...
python爬取小视频-40行代码教你利用Python网络爬虫批量抓取小视频
/1 前言/ 还在为在线看小视频缓存慢发愁吗?还在为想重新回味优秀作品但找不到资源而忧虑吗?莫要慌,让python来帮你解决,40行代码教你爬遍小视频网站,先批量下载后仔细观看,岂不美哉! /2 整理 ...
html国庆节代码,小程序10行代码实现微信头像挂红旗，国庆节个性化头像
最近朋友圈里经常有看到这样的头像既然这么火,大家要图又这么难,作为程序员的自己当然要自己动手实现一个. 老规矩,先看效果图仔细研究了下,发现实现起来并不难,核心代码只有下面10行. wx.canv ...
c语言编程红旗,小程序10行代码实现微信头像挂红旗
最近朋友圈里经常有看到这样的头像既然这么火,大家要图又这么难,作为程序员的自己当然要自己动手实现一个. 老规矩,先看效果图仔细研究了下,发现实现起来并不难,核心代码只有下面10行. wx.canv ...

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

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

最新文章

热门文章