javascript - 简化 Javascript 以使用多个 HTML 输入框

Question

我正在尝试制作一个简单的表单，允许用户在 HTML 文本框中键入内容，然后将其发送到他们无法修改的另一个文本框。我已经弄清楚如何做到这一点；然而，我使用的代码感觉很臃肿，我确信有一种方法可以简化它。

这是我的 JavaScript:

$(".name_input_1").on('keyup',function(){
    $(".name_print_1").val($(this).val());
});

$(".name_input_2").on('keyup',function(){
    $(".name_print_2").val($(this).val());
});

$(".name_input_3").on('keyup',function(){
    $(".name_print_3").val($(this).val());
});

$(".name_input_4").on('keyup',function(){
    $(".name_print_4").val($(this).val());
});

$(".name_input_5").on('keyup',function(){
    $(".name_print_5").val($(this).val());
});

$(".name_input_6").on('keyup',function(){
    $(".name_print_6").val($(this).val());
});

$(".name_input_7").on('keyup',function(){
    $(".name_print_7").val($(this).val());
});

$(".name_input_8").on('keyup',function(){
    $(".name_print_8").val($(this).val());
});

$(".name_input_9").on('keyup',function(){
    $(".name_print_9").val($(this).val());
});

$(".name_input_10").on('keyup',function(){
    $(".name_print_10").val($(this).val());
});

$(".name_input_11").on('keyup',function(){
    $(".name_print_11").val($(this).val());
});

$(".name_input_12").on('keyup',function(){
    $(".name_print_12").val($(this).val());
});

...还有更多...

function updateText(type) { 
 var id = type+'_print';
 document.getElementById(id).value = document.getElementById(type).value;
}

这是一些 HTML:

    <div style="float:left;">
    <input type="text" class="name_input_1">
    <br>
    <input type="text" class="name_input_2">
    <br>
    <input type="text" class="name_input_3">
    <br>
    <input type="text" class="name_input_4">
    <br>
    <input type="text" class="name_input_5">
    <br>
    <input type="text" class="name_input_6">
    <br>
    <input type="text" class="name_input_7">
    <br>
    <input type="text" class="name_input_8">
    <br>
    <input type="text" class="name_input_9">
    <br>
    <input type="text" class="name_input_10">
    <br>
    <input type="text" class="name_input_11">
    <br>
    <input type="text" class="name_input_12">
    <br>
    </div>
    <div style="float:left;">
    <input type="text" class="name_print_1" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_2" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_3" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_4" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_5" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_6" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_7" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_8" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_9" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_10" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_11" placeholder="Automatically Filled" disabled>
    <br>
    <input type="text" class="name_print_12" placeholder="Automatically Filled" disabled>

我尝试为它制作一个 fiddle ，但它在那里不起作用。不知道为什么。这在本地机器上运行得很好。我只是在寻找一种精简代码的方法。是的，我充其量只是一个 Javascript 新手。请对我宽容一些。 :)

Answer 1

我认为这就是您想要实现的目标。我编写的方式是，每次在第一个文本框上调用按键时，第二个文本框都会更新，但可以轻松更新代码以使该函数在不同的事件上触发。

var nameInputs = document.getElementsByClassName('name_input');
var disabledInputs = document.getElementsByClassName('name_print');

for (let i = 0; i < nameInputs.length; i++) {
  nameInputs[i].addEventListener('keyup', function() {
    disabledInputs[i].value = this.value;
    disabledInputs[i].disabled = true;
  });
}

<div style="float:left;">
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_inpu">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
  <input type="text" class="name_input">
  <br>
</div>

<div style="float:left;">
  <input type="text" class="name_print" placeholder="Automatically Filled">
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>
  <br>
  <input type="text" class="name_print" placeholder="Automatically Filled" disabled>