javascript - 将文本区域值显示为另一个文本区域值

Question

我有两个输入字段，都是文本区域。

<input id="display" type="text" disabled="disabled" style="border: none; background: none" />
<input id="name" type="text" />

我正在使用 jQuery 将 #name 的值显示到 #display 中。文本区域 #display 仅用于显示。 (它可以更改为任何其他合适的 HTML 元素)

我使用 jQuery 代码来做到这一点:

$('#name').keyup( function() {
    $('#display').val($('#name').val());
});

问题是，在我键入时，我希望 #display 中的值在其宽度内换行。当我在 #name 中键入长字符串时，字符串会换行并下降到下一行，但在 #display 中它不会这样做。

同样，当我键入 return 时，我希望在 #display 文本字段中遵循相同的格式。

谁能告诉我该怎么做？

Answer 1

你需要一个 <textarea> ，如果你想要多行文本编辑，则不是输入框:

<textarea id="display" disabled="disabled" style="border: none; background: none; resize: none;"></textarea>
<textarea id="name" style="resize: none;"></textarea>

因此，为了使两者看起来相同，您的代码应该有效:

$('#name').keyup(function() {
  $('#display').val($('#name').val());
});

我添加了 resize: none;因为它可以防止通过右下角的小 handle 调整文本区域的大小(仅限 Webkit)。