Make Input Element (Type="Text") Handle Multiple Lines of Text

Multiple lines of input in input type=text /

You need to use a textarea to get multiline handling.

<textarea name="Text1" cols="40" rows="5"></textarea>

Make input element (type=text) handle multiple lines of text

You need to use an HTML <textarea> element.

From MDN:

<textarea>

The HTML <textarea> element represents a multi-line plain-text
editing control.

Using <input> for multiline text is not possible natively and, if hacked, would be invalid HTML.

HTML5 spec:

4.10.5.1.2 Text (type=text) state and Search state
(type=search)

The input element represents a one line plain text edit
control for the element's value.

(emphasis mine)


Twitter input box

You mention you want the textarea to resemble Twitter's (auto-resize / no scrollbar). Consider this option and the following SO posts:

Autosize

A small, stand-alone script to automatically adjust textarea height.

  • Is it possible to hide the scroll bar on an HTML textarea element?
  • Remove scrollbars from textarea
  • It is possible to expand a textarea only with CSS?
  • Creating a textarea with auto-resize
  • is there a way to get a textarea to stretch to fit its content without using php or javascript?

How to get an input text for several lines?

Multi-line input fields are created with the textarea tag.

A text area with 10 lines will look something like this:

<textarea rows="10" cols="50">
A bunch of text goes here.
</textarea>

How to make a input tag multi line?

<input type="text" /> will always only be one line; You cannot force a multiple line behavior with CSS or JavaScript. You will need to use a <textarea> instead of a <input>.

You could use jQuery and it's .replaceWith() method to replace the targeted <input> with a <textarea>. however this has obvious caveats, such as those who visit your page without JavaScript on.

Example:

<input id="uxMessage" validation="required" name="uxMessage" type="text" />

$("#uxMessage").replaceWith('<textarea id="uxMessage" name="uxMessage"></textarea>');

How to get multiline input from the user

In Python 3.x the raw_input() of Python 2.x has been replaced by input() function. However in both the cases you cannot input multi-line strings, for that purpose you would need to get input from the user line by line and then .join() them using \n, or you can also take various lines and concatenate them using + operator separated by \n

To get multi-line input from the user you can go like:

no_of_lines = 5
lines = ""
for i in xrange(no_of_lines):
lines+=input()+"\n"

print(lines)

Or

lines = []
while True:
line = input()
if line:
lines.append(line)
else:
break
text = '\n'.join(lines)

Create input type=button with two lines of text for newer version of chrome

Although I can't prove that it's not possible, it's not a good idea to try to make the input button take up multiple lines. First of all, the HTML5 spec says only this about the value attribute:

If the element has a value attribute, the button's label must be the value of that attribute

Notice that "button's label" is not defined anywhere in the spec. That means it is up to browser vendors to choose how to interpret that, and it also means that they can change their interpretation at will.

You just witnessed the Chrome team deciding to make such a change. It could happen again, in another browser perhaps. So any solution you find now will not be permanent and subject to the whims of browser vendors.

That's why I strongly recommend using the <button> element. Because it is guaranteed by the spec to allow you to do HTML formatting, like line breaks.

Selecting all text in HTML text input when clicked

You can use the JavaScript .select() method for HTMLElement:

<label for="userid">User ID</label>
<input onClick="this.select();" value="Please enter the user ID" id="userid" />


Related Topics



Leave a reply



Submit