複数のテキストボックスからjquery内の単一のテキストエリアにバインドする2つの方法

テキストエリア（複数）からテキストエリアにデータを更新する必要がある状況が少しあります。複数のテキストボックスからjquery内の単一のテキストエリアにバインドする2つの方法

私は5つのテキストボックスに名前を入力し、1つのテキストエリアにはテキストボックスの名前の変更に従って自動的に更新されます。

テキストボックス1 = "i" は、テキストボックス2 = "AM"、textbox3 = "しよう"、textbox4 = "に"、textbox5 =次に

を "連結"、テキストエリアが表示されるはずです。 - 私は連結しようとしています。

私は "試した"と "試した"を変更した後、 "私"のように "私"のように "私"のようなテキストボックスで何かを変更したようなテキストエリアで何かを更新すると、 "再び言葉。

jqueryを使用してこれを実行しようとしています。このための解決策はありますか、私に教えてください。

ありがとうございました

出典

2017-09-12 hims

。 –

希望します。入力値を変更すると、テキストエリアが更新されます。

$(function() { 
 
\t var arrInitial; 
 

 
\t $(".inputField").on('focus', function() { 
 
\t \t arrInitial = []; 
 
\t \t $(".inputField").each(function() { arrInitial.push($(this).val()); }) 
 
\t }); 
 

 
\t $(".inputField").on('blur', function() { 
 
\t \t //If text area is blank then update all input values 
 
\t \t if ($.trim($("#txtArea").val()) === "") { 
 
\t \t \t var inputValues = ""; 
 
\t \t \t $(".inputField").each(function() { inputValues += " " + $(this).val(); }) 
 
\t \t \t $("#txtArea").val($.trim(inputValues)); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t //Get existing values from text area and split by " " 
 
\t \t \t var arrData = $("#txtArea").val().split(" "); 
 
         var arr = arrData.filter(function(v){return v!==''}); 
 
         var arrNew = []; 
 

 
\t \t \t $(".inputField").each(function (i) { 
 
\t \t \t \t if (arr[i] === arrInitial[i]) //Check against initial values in text fields 
 
\t \t \t \t \t arrNew.push($.trim($(this).val())); 
 
\t \t \t \t else 
 
\t \t \t \t \t arrNew.push(arr[i]); 
 
\t \t \t }); 
 

 
\t \t \t $("#txtArea").val(arrNew.join(" ")); 
 
\t \t } 
 
\t }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<input type="text" id="input1" value="One" class="inputField"> 
 
<input type="text" id="input2" value="Two" class="inputField"> 
 
<input type="text" id="input3" value="Three" class="inputField"> 
 
<input type="text" id="input4" value="Four" class="inputField"> 
 
<br/><br/> 
 
<textarea id="txtArea" rows=10 cols=10 value=""></textarea>

出典

2017-09-12 03:19:56

* "テキストエリアで何かを更新すると、"試してみた "が"試した "に変更された後、"私 "のように"私 "のようなtextbox1で変更された後、テキストエリアに"試した "もう一度言葉を覚えてください。 "* - 質問から。 – nnnnnn

要件が正しく認識されませんでした。コードを更新しました。 textareaで更新されたテキストが ""で区切られていると仮定します。 –

これはある程度機能します。問題は、テキスト領域にスペースを追加するときです。一部のデータが欠落しています。 – hims

あなたはこのために試すことができます：私は以下の私のコードを更新しました

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".inputText").keyup(function(){ 
    $('#result')[0].innerHTML=$('#one').val()+$('#one1').val()+$('#one2').val()+$('#one3').val()+$('#one4').val(); 
    //$("input").css("background-color", "pink"); 
}); 
}); 
</script> 
</head> 
<body> 
<input type="text" class="inputText" id="one"/> 
<input type="text" class="inputText" id="one1"/> 
<input type="text" class="inputText" id="one2"/> 
<input type="text" class="inputText" id="one3"/> 
<input type="text" class="inputText" id="one4"/> 
<br /><br /> 
Result: 
<textarea id="result"></textarea> 

</body> 
</html>

出典

2017-09-12 03:30:51

'.innerHTML'？なぜ '.html（）'や '.val（）'だけではないのですか？ * "私がテキストエリアで何かを更新した場合、"試してみる "ように変更した後、"私 "のような"私 "のようなtextbox1で変更した後、テキストエリアで"試した "単語もう一度。 "* - 質問から。 – nnnnnn

複数のテキストボックスからjquery内の単一のテキストエリアにバインドする2つの方法

答えて

関連する問題