將多個輸入字段合併到一個使用Javascript的輸入字段中？

Question

我有下面的代碼，它將多個字段組合到一個字段中，但只有當您單擊按鈕時纔會將它們組合在一起。有沒有一種方法可以編輯它，以便它不需要點擊按鈕來組合字段，只是將它們組合爲用戶類型？

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  

    First Name: <input class="combine" id="input1" value=""/> 
    Last Name: <input class="combine" id="input2" value=""/> 
    <button id="setVal">Combine</button> 
First and Last Name Combined <input class="combine" id="Voltes5" size="105" value='' /> 

    <script type="text/javascript"> 
    $('#setVal').click(function(){ 
    $('#Voltes5').val(
     $('.combine') 
     .not('#Voltes5') 
     .map(
     function(){ 
      return $(this).val(); 
     }) 
     .get() 
     .join('') 
    ); 
    }); 
     </script> 

Answer 1

使用input事件。

$(function() { 
 
    $('#input1, #input2').on('input', function() { 
 
    $('#Voltes5').val(
 
     $('#input1, #input2').map(function() { 
 
     return $(this).val(); 
 
     }).get().join(' ') /* added space */ 
 
    ); 
 
    }); 
 
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 
First Name: <input class="combine" id="input1" value="" /> Last Name: <input class="combine" id="input2" value="" />First and Last Name Combined <input class="combine" id="Voltes5" size="105" value='' />

Answer 2

$(document).ready(function(){ 
 
$("#setVal").click(function(){ 
 
$("#Voltes5").val($("#input1").val() + " " + $("#input2").val()); 
 
}); 
 
\t });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    First Name: <input class="combine" id="input1" value=""/> 
 
    Last Name: <input class="combine" id="input2" value=""/> 
 
    <button id="setVal">Combine</button> 
 
First and Last Name Combined <input class="combine" id="Voltes5" size="105" value='' />