js实现输入框双向同步
2024-11-26 13:16:07
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双向输入框同步示例</title>
<script>
// 当文档加载完毕时绑定事件
document.addEventListener('DOMContentLoaded', function() {
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
// 函数用于同步输入框的值
function syncValues(source, target) {
target.value = source.value;
}
// 为第一个输入框添加事件监听器
input1.addEventListener('input', function() {
syncValues(input1, input2);
});
// 为第二个输入框添加事件监听器
input2.addEventListener('input', function() {
syncValues(input2, input1);
});
});
</script>
</head>
<body>
<!-- 第一个输入框 -->
<input type="text" id="input1" placeholder="在此输入文本...">
<!-- 第二个输入框 -->
<input type="text" id="input2" placeholder="文本将同步显示在这里...">
</body>
</html>