複数のHTML入力ボックスで動作するJavascriptの簡略化

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> 

私が作るしようとしていますそれのためのフィドルしかし、それはそこでは動作しません。理由は分かりません。これは、ローカルマシン上で正常に動作します。私はそのコードをスリムにする方法を探しています。はい、私は最高でJavascriptの初心者です。私は簡単に行ってください。 :)

Answer 1

私は、これはあなたが達成しようとしているものだと思います。私が書いたやり方は、最初のテキストボックスでkeypressが呼び出されるたびにsecoindテキストボックスが更新されるようにすることですが、コードを簡単に更新して別のイベントで関数を起動させることができます。

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>

Answer 2

は、彼らの「表示」することと、このよう機能を使用するどの方向を向いた入力にデータ属性を適用し、「名前入力」のように、すべての入力に対応し、単一のクラスを追加します。

$(".name-input").on('keyup',function() { 
    var input = $(this); 
    var target = input.data('target'); 
    $(target).val(input.val()); 
}); 

あなたのHTMLの

データ属性は次のようになります。

<input type="text" class="name-input name_input_1" data-target=".name_print_1" /> 

ご入力の上、いくつかのターゲットを追加することを犠牲に少ないJavaScriptコードを取得のお手伝いをする必要があること。それ以外

、あなたのクラス名を「ハック」と、このような何かを行うことができます。

$('[class^="name_input"]').on('keyup', function() { 
    var target = this.className.replace('input', 'print'); 
    $(target).val($(this).val()); 
});