将文本区域的值添加到已填充的输入中

Add value of textarea to already filled input

本文关键字：填充 输入 添加 文本 区域      更新时间：2023-10-29

我有一个输入，它将从cms和另一个文本区域预先填充：jsFiddle

jQuery('#description_field').on('change', function () {
   var val=jQuery("#description").val();
   jQuery("#description").val(val + ' ' +jQuery( "#description_field" ).val());
});

-

<form>
   <textarea id="description_field" name="description_field"></textarea>
   <input type="hidden" id="description" name="description" value="{{ cms.tag }} <!-- Text of the textarea -->">
</form>

这实际上已经起作用了，但当用户想第二次更改textarea中的文本时，更改会添加到旧input文本的末尾，这并不好。

如何更改代码，使文本始终与textarea 1:1？

感谢

您可以更改：

var val=jQuery("#description").val();

至：

var val = jQuery("#description").attr('value');

jsFiddle示例

在附加"更改"事件之前存储字段值：

var val=jQuery("#description").val();
jQuery('#description_field').on('change', function () {
   jQuery("#description").val(val + ' ' +jQuery( "#description_field" ).val());
});

FIDDLE

这里有一种方法：

//store the initial value from input
var initialValue = $("#description").val();
$('#description_field').on('input', function () {
    $("#description").val(initialValue + ' ' + $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-horizontal" id="charge-form" method="post" action="" accept-charset="UTF-8">
    <textarea class="form-control" rows="3" id="description_field" name="description_field"></textarea>
    <hr>
    <input id="description" name="description" value="XYZ ">
</form>

如果你想要1:1的文本，为什么不直接：（在下面运行）

var $textarea = $('#description_field'),
    $input = $("#description");
$textarea.on('keyup', function () {
	$input.val($textarea.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" id="charge-form" method="post" action="" accept-charset="UTF-8">
      
          <textarea class="form-control" rows="3" id="description_field" name="description_field"></textarea>
    <hr>
      <input id="description" name="description" value="XYZ ">
</form>

相关文章：