<input>通过CSS支持多行

Question

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.

Answer 1

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

text
    Creates a single-line text input control.

Answer 2

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.

See its documentation .

Answer 3

单独使用CSS无法实现所需，但您可以使用JavaScript来防止用户在<textarea>字段中输入换行符。

Answer 4

Look at this, 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.

Answer 5

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:

$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.