JavaScript实现两个文本框内容同步的两种方案

基于定时器的文本框同步方案

HTML代码结构如下：

<html>
<head>
<script>
// 定义同步函数
function synchronize(){
document.getElementById('i1').value =document.getElementById('i2').value;
// alert("同步成功");
     } 
// 执行同步逻辑
setInterval(synchronize,500);// 设置同步时间间隔，每0.5秒同步一次
</script>
</head>
<body>
在第二个输入框中输入字符，会自动同步到第一个输入框。<br/><br/>
第一个输入框：<input type="text" size="45" id="i1" name="first"><br/><br/>
第二个输入框：<input type="text" size="45" id="i2" name="second">
</body>
</html>

将上述HTML代码保存为html格式文件，使用浏览器打开即可看到效果。请注意：部分浏览器出于安全考虑，默认禁止执行本地脚本，此时需点击“运行”按钮允许执行。

基于事件处理的文本框同步方案

在进一步查阅资料时发现，除了change事件外，其他事件如keyup等也可用于处理同步。以下提供另外两个示例片段：

// 此方法并非即时性改变
<input type="text" id="t1" value="" size="45" onchange="document.getElementById('t2').value=this.value" />
<input type="text" id="t2" value="" size="45" onchange="document.getElementById('t1').value=this.value" />
// 此方法为即时性改变，但若通过鼠标操作（如粘贴）则无法检测，因此建议将上述两种方法结合使用。
<input type="text" id="t3" value="" size="45" onkeyup="document.getElementById('t4').value=this.value" />
<input type="text" id="t4" value="" size="45" onkeyup="document.getElementById('t3').value=this.value" />