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中输入长字符串时，字符串会作为下一行换行并倒下，但在#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的值，因此不需要表单元素。

将textarea值显示到另一个textarea值

2 个答案: