实现两个INPUT同步输入

最新推荐文章于 2021-06-04 20:58:49 发布
最新推荐文章于 2021-06-04 20:58:49 发布
阅读量1.3k 收藏
点赞数 1
文章标签： JavaScript XHTML HTML ViewUI
不同name时
<script>
functionjj(){
vara=document.getElementsByName("s1")[0].value;
document.getElementsByName("s2")[0].value=a;
}
</script>
<inputname=s1type="text"value="corange.cn">
<inputname=s2type="text"value=""οnfοcus="jj()">
请把鼠标移动到第二个文本框
===================
不同IP时候
<script>
functionjj(){
vara=document.getElementById("s1").value;
document.getElementById("s2").value=a;
}
</script>
<inputid=s1type="text"value="蓝色理想">
<inputid=s2type="text"value=""οnfοcus="jj()">
请把鼠标焦点放到第二个文本框
====================
实时同步输入
<scriptlanguage="javascript">
functioncopyob1toob2(){
document.all["ob_text_2"].value=document.all["ob_text_1"].value
}
</script>
<inputtype="text"id="ob_text_1"size=20οnkeyup="copyob1toob2()">
<inputtype="text"id="ob_text_2"size=20>
=====================
或者<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title></title>
</head>
<body>
<inputid="s1"type="text"value="">
<inputid="s2"type="text"value="">
<script>
varo_1=document.getElementById("s1");
varo_2=document.getElementById("s2");
o_1.οnkeyup=function(){
//onkeyup,如果用onkeydown则少一个字母
o_2.value=o_1.value
}
</script>
</body>
</html>
iteye_6481
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何在两个input输入框之间加上文字，如查询两条时间之间的数据时
qq_38071008的博客
09-06 1581
如图，我们想做成如下的效果，很多人在写文字时会考虑<p>标签，但是p标签的缺点时，会自动把文字后面的内容另起一行， 这里推荐使用<span> 此时可能会出现浮动的情况，因此我们有可能需要在<span>标签中加入浮动设置，至此完美解决，代码如下 <td class="fieldInput" style="width: 20%;" colspan=...
每日分享html之两个input搜索框、两个button按钮、一个logo效果
小淼淼的博客
09-29 2797
每日分享html之两个input搜索框、两个button按钮、一个logo效果
一个输入框输入内容，另一个输入框同步内容
zl_action的博客
04-12 9218
&lt;html&gt; &lt;head&gt; &lt;script&gt;     function cop(){         var str=document.getElementById("input1").value;         document.getElementById("input2").value = str;     } &lt;/script&gt; &lt;/
两个文本框同步输入
weixin_30348519的博客
11-17 223
文本框的 onkeyup 属性，填写文本框时触发 <table> <tr> <td>用户名 :</td> <td> <s:textfield onkeyup="doChangeVid(this.value);" name="sysLogin.name" id="sysLogin.name" size="20" maxl...
两个INPUT同步输入的方法小结 兼容IE和firefox
09-06
有时候我们需要同步输入一些表单input等，下面的几种方法，建议用onkeyup的方法来实现。
js监听表单value的修改同步问题，跨浏览器支持
12-10
想要实现的功能大概是这样的： 有两个文本框，其中一个只读，另一个可以输入。要求在可输入文本框中输入文本时，只读文本框能够获得输入的值，且只读文本框旁边出现提示信息，实时显示只读文本框的内容。 这个功能看...
操作系统PV操作期末复习题
03-27
4.有一个俱乐部，有甲乙两个服务员，当顾客有请求时 5.一家四人父、母、儿子、女儿围桌而坐；桌上有一个水果盘 6.有一个超市，最多可容纳N 个人进入购物 7.有一个理发店，店内共有 20 个座位供顾客等待理发 8.一个...
基于MIMO电力线信道的定时同步算法.docx
07-12
在文献[2]中，提出了在两根发射天线发送同样的训练序列来实现 MIMO 系统同步的方法；在文献[3]中，提出了将发射天线选择和接收端最大比合并的方案来提高 MIMO-OFDM 系统在平坦衰落信道和多径衰落信道下的同步性能；...
html 输入和显示同步,实现两个INPUT同步输入
weixin_35843523的博客
06-04 1457
不同name时 functionjj(){ vara=document.getElementsByName("s1")[0].value; document.getElementsByName("s2")[0].value=a; } 请把鼠标移动到第二个文本框 =================== 不同IP时候 functionjj(){ vara=document.get...
jQuery实现文本框输入同步的方法
01-19
本文实例讲述了jQuery实现文本框输入同步的方法。分享给大家供大家参考。具体如下： 这段jquery代码可以保持一个文本框输入的同时另外一个文本框与之同步 var $inputs = $(.example-input); $inputs.keyup(function() { $inputs.val($(this).val()); }); 希望本文所述对大家的jQuery程序设计有所帮助。
JS实现两个input框内容实时变化
cxws110的博客
03-27 1578
采用onkeyup()事件： <input type="text" value="${fp.FYe}" id="bchkje_${fp.id}" class="bchkje" onkeyup="jsye('${fp.id}')" style="width: 80px;"/> //计算余额 function jsye(fpid){ var jshjje=doc...
两个input框的关联匹配
新白的博客
04-30 5382
实现效果：第一个input框输入内容正确时，第二个input框会根据第一个input框的不同内容而匹配不同的值 （inpu1模糊搜索可参考https://blog.csdn.net/weixin_44371012/article/details/89716165） 实现代码： const data=[ { "site": "佛山顺德大良逢沙", "...
原生js实现俩个输入框内的内容同步
业余前端的职业经历
05-11 2075
这个在没有vue框架的双向数据绑定的时候,只能苦逼的用原生js实现了 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <input type="text" class="input_user"> <br> <br> <input type="text" class="input_user"> <script
jquery + html 多个input同时输入
ITSmallwhite_的博客
01-07 717
源码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> </style> </style> </head> <body> <h2 id="h2-caption">&lt
js实现在一个input框输入时另一个input同步显示
spaceX_91的博客
04-30 1万+
在我做的一个项目中有一个功能需求是：     当输入美元价格时，另一个输入框内同步显示相应的人民币价格。 &lt;dl&gt; &lt;dt&gt;单 价（USD）：&lt;/dt&gt; &lt;dd&gt; &lt;input type="text" id="USD" name="USD" value="" onchange=&qu
python技巧2：用input( )同时输入多个数
热门推荐
graysu的博客
05-10 11万+
用map( ) ， split( )以及input( ) 可以实现用input( )同时输入多个数。 1.map( ) map()函数接收两个参数，一个是函数，一个是序列，map将传入的函数依次作用到序列的每个元素，并把结果作为新的list返回。 2.split( ) 拆分字符串。通过指定分隔符对字符串进行切片，并返回分割后的字符串列表（list） 3.map(function,input(“以空...
div 中class 是input 如何让两个input数据同步
最新发布
08-21
### 回答1： 可以通过JavaScript来实现两个input数据同步。首先，为两个input元素都添加一个事件监听器，当其中一个input的值发生变化时，即可通过`value`属性获取其值，并将其赋值给另一个input的`value`属性。以下是一个简单的示例代码： ```html <div> <input class="input1" type="text"> <input class="input2" type="text"> </div> <script> const input1 = document.querySelector('.input1'); const input2 = document.querySelector('.input2'); input1.addEventListener('input', () => { input2.value = input1.value; }); input2.addEventListener('input', () => { input1.value = input2.value; }); </script> ``` 这样，当你在其中一个input中输入内容时，另一个input也会自动显示相同的内容，从而实现了数据同步。 ### 回答2： 在HTML中，我们可以通过JavaScript来实现两个class为input的div中的输入数据同步。 首先，我们需要获取这两个class为input的div元素。可以使用document.getElementsByClassName()方法来获取所有class为input的元素，并将其存储在一个变量中。 然后，我们可以使用addEventListener()方法来为这两个元素添加一个input事件监听器。这样，当用户输入时，会触发该监听器。 在监听器函数中，我们可以获取用户在其中一个input元素中输入的数据，并将其赋值给另一个input元素的value属性。这样就实现了两个input数据的同步。 以下是一个简单的示例代码： ```html <div class="input"> <input id="input1" type="text"> </div> <div class="input"> <input id="input2" type="text"> </div> <script> var inputs = document.getElementsByClassName("input"); inputs[0].addEventListener("input", function () { var input1Value = document.getElementById("input1").value; document.getElementById("input2").value = input1Value; }); inputs[1].addEventListener("input", function () { var input2Value = document.getElementById("input2").value; document.getElementById("input1").value = input2Value; }); </script> ``` 在上述代码中，我们使用了addEventListener()方法为两个input元素添加了input事件监听器。当其中一个元素的值发生变化时，监听器函数会将该值赋值给另一个元素的value属性，从而实现两个input数据的同步。 ### 回答3： 要实现两个class为input的div中的数据同步，可以通过以下步骤： 首先，为每个input元素添加一个唯一的id属性，例如，一个div的id设置为"div1"，另一个div的id设置为"div2"。 然后，在JavaScript中，使用document.getElementById方法获取这两个div元素，并将它们分别保存到变量div1和div2中。 接下来，获取div1中的input元素和div2中的input元素，分别保存到变量input1和input2中。 然后，为input1和input2分别添加一个事件监听器，监听它们的输入变化。 在事件处理程序中，获取input1的值并将其设置为input2的值，以实现数据的同步。同样，也可以获取input2的值并将其设置为input1的值。 最后，要确保在页面加载时，div1和div2中的初始值已经设置，并且两个input元素的初始值可以同步。 以上是一种基本的实现方式，可根据具体需要进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值