将 textarea 的值添加到已填充的输入中答案

【问题标题】：Add value of textarea to already filled input将 textarea 的值添加到已填充的输入中
【发布时间】：2015-02-14 00:06:13
【问题描述】：

我有一个将从 cms 和另一个 textarea 预填充的输入：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？

谢谢

【问题讨论】：

为什么这么多人写jQuery而不是$？
@JeremyThille 写jQuery 有什么问题？
它更长。我很懒。如果 jQuery 被命名为 dieMeistenAwesomeJSBibliothekDerWelt 会怎样？
如果您在同一个项目中实现了多个库，其中$ 也可以是其他东西的简写，它会派上用场。

标签： javascript jquery html forms

【解决方案1】：

你可以改变：

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

到：

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

jsFiddle example

【讨论】：

【解决方案2】：

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

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

FIDDLE

【讨论】：

【解决方案3】：

这是一种方法：

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

【讨论】：

【解决方案4】：

如果你想要 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>

【讨论】：