Html <input> 通过 CSS 支持多行

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1324965/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 00:41:14  来源:igfitidea点击:

<input> multi-line capable via CSS

htmlcssinputtextarea

提问by Bob

Is there a way to get an <input />-field in HTML to wrap lines if the text is longer than the field using CSS? I don't want to use <textarea />as I want to avoid users entering hard line-breaks by pressing enter.

<input />如果文本比使用 CSS 的字段长,有没有办法在 HTML 中使用-field 来换行?我不想使用,<textarea />因为我想避免用户通过按 Enter 键输入硬换行符。

回答by RichieHindle

No, sorry. <input type=text>is single line by definition. See the W3C document Forms in HTML Documents:

不,对不起。 <input type=text>根据定义是单行。请参阅HTML 文档中的 W3C 文档表单

text
    Creates a single-line text input control.

回答by pep180

Look at this, http://www.echoecho.com/htmlforms08.htm

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

The wrap options are the most tricky part of text areas. If you turn wrap off the text is handled as one long sequence of text without linebreaks. If you set it to virtual the text appears on your page as if it recognized linebreaks - but when the form is submitted the linebreaks are turned off. If you set it to physical the text is submitted exactly as it appears on the screen - linebreaks included.

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

回答by aehlke

Using Dojo's Dijit TextArea form control, based off TextArea, you can have an input field which begins as a single line and expands as the user adds to it.

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

See its documentation.

请参阅其文档

回答by Josh Leitzel

You can't do what you want with CSS alone, but you could use JavaScript to prevent the user from entering line breaks in a <textarea>field.

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

回答by Simon

Your best bet is use a textarea (with autogrow capabilities if you like), and then strip out the new lines when the form is submitted. Using php it would be something like this:

最好的办法是使用 textarea(如果您愿意,可以使用自动增长功能),然后在提交表单时去掉新行。使用 php 它会是这样的:

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

This would have the desired effect of blocking newline characters. As others have pointed out it's not really possible to get multi-line input in an input field.

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