将texarea值显示到另一个textarea值

Question

我有两个输入字段，都是textareas类型。

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

我正在使用jQuery将#name的值显示在#display 。 textarea #display仅用于显示。 （它可以更改为任何其他合适的HTML元素）

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

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

问题是，当我输入时，我希望#display的值包含在其宽度内。 当我在#name键入长字符串时，字符串会作为下一行包装和#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; 因为它可以防止textareas通过右下角的小手柄调整大小（仅限Webkit）。

Answer 2

您可以将white-space属性设置为#display并使其成为div而不是input

http://www.quirksmode.org/css/whitespace.html

#display {
    white-space:pre;
    white-space:pre-wrap;
    white-space:pre-line;
}

这些值中的任何一个都可能适合您，请参阅链接以供参考和浏览器支持。

我假设您不需要发布#display的值，因此不需要表单元素。