为了账号安全,请及时绑定邮箱和手机立即绑定

面试问题第二弹-文本内容的实时同步

面试的时候被问到这样一个问题,两个文本框,怎样实现第二个文本框的内容和第一个文本框的内容实时同步。
我的第一反应是,只要取到input1的value值,使input2的value与其相等就可以了。但面试官又补充了需要实时同步,那么问题来了,如何实时同步。
首先,我想到的是Angular框架,正好可以完美的解决这个问题,但是问题好像并没有那么复杂,而且考题的重点是JS,那么需要用JS来接触这个问题。
然后,我想到了用定时器setInterval进行刷新,

<script>
var a=document.getElementById("input1"),
      b=document.getElementById("input2");
setInterval(function(){
b.value=a.value},50)
</script>

这个方法可行,但是用定时器消耗内存,显然大题小用。
那么,正确的方法是什么呢?
input属性有onchange属性,

<input id="input1" onchange="document.getElementById("input2").value=this.value" />;
<input id="input2" onchange="document.getElementById("input1").value=this.value" />;

但这样仅能实现input1失去聚焦的时候,input2的值才随着发生变化,
所以我们有用到onkeyup属性:

<input id="input1" onkeyup="document.getElementById("input2").value=this.value" />;
<input id="input2" onkeyup="document.getElementById("input1").value=this.value" />;

这样这个问题被完美解决

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消