如何使 <input> 标签多行？答案

【问题标题】：How to make a <input> tag multi line?如何使 <input> 标签多行？
【发布时间】：2011-11-12 07:09:57
【问题描述】：

我想知道是否可以使用 CSS 或其他选项制作具有多行外观的<input> 标签（类似于<TEXTAREA></TEXTAREA>），不幸的是我可以在我的网络应用程序中替换标签.

   <input id="uxMessage" validation="required" name="uxMessage" type="text" />

非常感谢

【问题讨论】：

不，除非你以某种方式把它变成textarea。不过，您可以使用 jQuery 相对轻松地做到这一点。
你可以设置一个更大的文本框，但我很确定它仍然是一行。
是的，Jeremy 仍然是一行。
@你为什么需要那个？您可以设置文本区域的样式，使其看起来像一个文本框，但可以是多行的。

标签： html css forms

【解决方案1】：

<input type="text" /> 永远只有一行；您不能使用 CSS 或 JavaScript 强制执行多行行为。您需要使用<textarea> 而不是<input>。

您可以使用 jQuery 和 .replaceWith() 方法将目标 <input> 替换为 <textarea>。但是，这有一些明显的警告，例如那些在没有打开 JavaScript 的情况下访问您的页面的人。

例子：

<input id="uxMessage" validation="required" name="uxMessage" type="text" />

$("#uxMessage").replaceWith('<textarea id="uxMessage" name="uxMessage"></textarea>');

【讨论】：

【解决方案2】：

不是没有一些相当强大的 Javascript，Textarea 是我所知道的唯一多行文本输入。

编辑

这样的东西可能适用于 jQuery：

var textArea = jQuery('<textarea />').attr({'id': 'uxMessage', 'name': 'uxMessage'});
jQuery('#uxMessage').replaceWith(textArea);

【讨论】：