<input> multi-line capable via 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

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.

Answer 4

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.