Question

我有点需要将数据从文本框（多个）更新到文本区域。

我有5个文本框，我在其中输入名称和一个文本区域，我根据文本框中的名称更改自动更新。

文本框1 =＆＃34; i＆＃34;，文本框2 =＆＃34; am＆＃34;，textbox3 =＆＃34;尝试＆＃34;，textbox4 =＆＃34;到＆＃34; ，textbox5 =＆＃34;连接＆＃34;

然后，文本区域应显示。 - 我想连接。

现在，如果我更新文本区域中的任何内容，就像我更改了＆＃34;尝试＆＃34;到＆＃34;试过＆＃34;然后我改变了textbox1中的内容，比如＆＃34;我＆＃34;我们＆＃34;我们＆＃34;然后在文本区域，它不应该取代＆＃34;尝试＆＃34;再说一遍。

我正在尝试使用jquery执行此操作。有没有解决方案，请告诉我。

由于

Answer 1

希望这会有所帮助。更改任何输入值并更新textarea。

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

<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>

Answer 2

你可以试试这个：

<!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>

在jquery中从多个文本框绑定到单个文本区域的两种方式

2 个答案: