<input> 通过 CSS 支持多行

Posted 2023-05-07

【中文标题】<input> 通过 CSS 支持多行

【英文标题】：<input> multi-line capable via CSS

【发布时间】：2010-11-22 10:28:49

【问题描述】：

如果文本比使用 CSS 的字段长，有没有办法让 html 中的 <input />-字段换行？我不想使用<textarea />，因为我想避免用户按回车键输入硬换行符。

【参考方案1】：

不，对不起。 <input type=text> 定义为单行。见W3C文档Forms in HTML Documents：

text
    Creates a single-line text input control.

【参考方案2】：

使用基于 TextArea 的 Dojo 的 Dijit TextArea 表单控件，您可以有一个输入字段，该字段以单行开头并随着用户添加而扩展。

见its documentation。

【参考方案3】：

你不能单独使用 CSS 做你想做的事，但你可以使用 javascript 来防止用户在 <textarea> 字段中输入换行符。

【讨论】：

他想要一个换行的输入。这对我来说听起来像是一个文本区域。他只是不希望用户能够输入换行符，而您可以使用 JavaScript 来做到这一点。

【参考方案4】：

看看这个， http://www.echoecho.com/htmlforms08.htm

换行选项是文本区域中最棘手的部分。 如果关闭换行，则文本将作为一长串没有换行符的文本处理。 如果您将其设置为虚拟，则文本会出现在您的页面上，就好像它可以识别换行符一样 - 但是当提交表单时，换行符会被关闭。 如果您将其设置为物理，则提交的文本与屏幕上显示的文本完全相同 - 包括换行符。

【参考方案5】：

您最好的选择是使用文本区域（如果您愿意，可以使用自动增长功能），然后在提交表单时去掉新行。使用php它会是这样的：

$text = str_replace(array("\n","\r"),'',$_POST['text_field']);

这将具有阻止换行符的预期效果。正如其他人指出的那样，实际上不可能在输入字段中获得多行输入。