views:

1576

answers:

4

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.

+4  A: 

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.
RichieHindle
+1  A: 

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.

Wahnfrieden
A: 

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.

Josh Leitzel
That's not what he wanted.
Wahnfrieden
He wants an input that wraps. That sounds like a textarea to me. He just didn't want the user to be able to enter line breaks, which you could do with JavaScript.
Josh Leitzel
A: 

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.

Farid