简化Javascript以与多个HTML输入框一起使用

Question

I'm trying to make a simple form that will allow a user to type into an HTML text box, which will then send that to another text box that they cannot modify. I have figured out how to do this; however, the code I'm using feels bloated and I'm sure there's a way to streamline it.

Here is my 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());
});

...and a little more...

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

Here is some 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>

I have tried to make a Fiddle for it, but it doesn't work there. Not sure why. This does work just fine on a local machine. I'm just looking for a way to slim-down that code. Yes, I am a Javascript novice at best. Please go easy on me. :)

Answer 1

I think this is what you're trying to achieve. The way I wrote it is so that the secoind textbox will update every time a keypress is called on the first textbox, but the code can easily be updated to have the function fire on a different event.

 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

Add a single class that corresponds to all inputs, like "name-input", apply a data attribute on inputs pointing towards which will be their "display" and use the function as this:

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

The data attribute on your HTML will look like this:

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

That should help you with getting less javascript code on the expense of adding a few targets on your inputs.

Other than that, you can "hack" your class names and do something like this:

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