javascript - 如何制作显示相同数据的两个输入字段？

Question

所以当用户更改选项卡并按下按钮时，我有一个输入字段需要在另一个地方弹出， 但我认为把 div 扔来扔去太麻烦了， 那么是否可以制作两个输入字段，但让它们显示用户输入的相同输入？

或者有更简单的方法吗？

Answer 1

试试这个。当然，确保它在 DOM .ready() 上.

$('#input1').blur(function() {
    $('#input2').val( this.value );
});

• Use .blur()在用户离开 input1 时运行代码。
• Use .val()将 input2 的值设置为 input1 的 this.value。

如果您还需要反向工作，只需分配另一个处理程序，反转输入即可。

$('#input2').blur(function() {
    $('#input1').val( this.value );
});

---

编辑:要处理多个输入，给它们所有相同的类，然后使用成对的 ID。

像这样:

示例: http://jsfiddle.net/m3q4V/

<!-- In tab 1 -->
<input type="text" class="someClass" id="address_1" />
<input type="text" class="someClass" id="city_1" />
<input type="text" class="someClass" id="zip_1" />

<!-- In tab 2 -->
<input type="text" class="someClass" id="address_2" />
<input type="text" class="someClass" id="city_2" />
<input type="text" class="someClass" id="zip_2" />

js:

$('.someClass').blur(function() {
    var parts = this.id.split('_'); // separate into parts, like 'address' and '2'
    var num = (parts[1] == 2) ? 1 : 2;  // invert the number between 1 and 2
      // build the selector with 'address' + '_' + '1'
    $('#' + parts[0] + '_' + num).val( this.value );
});