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

问题

I've created a form with an input, but the box only handles text in a single row. I would like to style it so that the input field is similar to that of Twitter's, where the box itself is multiple rows:

And it also expands when you hit enter:

This is currently what I have:

<form name="userForm">
  <input type="text" id="userInput" name="userInput" placeholder="Enter text here.">
  <button type="submit" id="button">Submit</button>
</form>

I've styled the button and the input, but haven't done anything to change its shape, so it's at default. What do I have to tweak to achieve this?

回答1:

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?

回答2:

Use TextArea.Alter rows and columns attribute according to requirement.

<textarea class="input" rows="10" cols="10">Some text here</textarea>

To add the hover effect and change the box size , use css. Assign a normal height and width, and change that on focus.

.input:focus {
    height:300px;
}
.input{
    width:500px;
    height:200px;
}

回答3:

Use <div contenteditable="true"> (supported well) with storing to <input type="hidden">.

HTML:

<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">

js (using jQuery):

$("#multilineinput").on('keyup',function(e) {   
    $("#detailsfield").val($(this).text()); //store content to input[type=hidden]
});

if anyone wanted to use this for wrapping a single line and using enter to submit or move on in the form, here is what to add:

$("#multilineinput").on('keypress',function(e) {    
    if(e.which == 13) { //on enter
        e.preventDefault(); //disallow newlines     
        // here comes your code to submit
    }
});

来源：https://stackoverflow.com/questions/35542278/make-input-element-type-text-handle-multiple-lines-of-text

标签

html

css

forms

twitter

input