CODEWITHSUNDEEP
htmlcssinputtextarea
Bob
Bob

Reputation: 5618

<input> multi-line capable via CSS

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.

Upvotes: 16

Views: 45926

Answers (5)

pep180
pep180

Reputation: 31

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.

Upvotes: 3

Simon
Simon

Reputation: 950

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.

Upvotes: 0

Josh Leitzel
Josh Leitzel

Reputation: 15199

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.

Upvotes: 3

aehlke
aehlke

Reputation: 15831

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.

Upvotes: 3

RichieHindle
RichieHindle

Reputation: 281395

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.

Upvotes: 25

Related Questions