Html <input type="text" /> 中的多行输入

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6262472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:58:30  来源:igfitidea点击:

Multiple lines of input in <input type="text" />

html

提问by Beginner

I have this text input in a form:

我以一种形式输入了此文本:

<input type="text"
       cols="40" 
       rows="5" 
       style="width:200px; height:50px;" 
       name="Text1" 
       id="Text1" 
       value="" />

I am trying to get it to take multiple lines of input. The width and height make the box to be bigger, but the user can enter text all (s)he wants yet it fills one line only.

我试图让它接受多行输入。宽度和高度使框更大,但用户可以输入他想要的所有文本,但它只填充一行。

How do I make the input more like a textarea?

如何使输入更像文本区域?

回答by ólafur Waage

You need to use a textarea to get multiline handling.

您需要使用 textarea 来获得多行处理。

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

回答by Sté

It is possible to make a text-input multi-line by giving it the word-break: break-word;attribute. (Only tested this in Chrome)

通过给它word-break: break-word;属性可以使文本输入多行。(仅在 Chrome 中测试过)

回答by álvaro González

You can't. At the time of writing, the only HTML form element that's designed to be multi-line is <textarea>.

你不能。在撰写本文时,唯一设计为多行的 HTML 表单元素是<textarea>.

回答by themightysapien

Use the textarea

使用文本区域

<textarea name="textarea" style="width:250px;height:150px;"></textarea>

don't leave any space between the opening and closing tags Or Else This will leave some empty lines or spaces.

不要在开始和结束标签之间留下任何空格否则这将留下一些空行或空格。

回答by Matías Fidemraizer

Check this:

检查这个:

The TEXTAREA element creates a multi-line text input control

TEXTAREA 元素创建多行文本输入控件

回答by Osanda Deshan

You should use textareato support multiple-line inputs.

您应该使用textarea来支持多行输入。

<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>

回答by Prasad Gayan

If you need textareawith auto height, Use follows with pure javascript,

如果您需要具有自动高度的textarea,请使用以下纯 javascript,

function auto_height(elem) {  /* javascript */
    elem.style.height = "1px";
    elem.style.height = (elem.scrollHeight)+"px";
}
.auto_height { /* CSS */
  width: 100%;
}
<textarea rows="1" class="auto_height" oninput="auto_height(this)"></textarea>

回答by IgniteCoders

Input doesn't support multiple lines. You need to use a textareato achieve that feature.

输入不支持多行。您需要使用 textarea来实现该功能。

<textarea name="Text1"></textarea>


Remeber that the <textarea>have the value inside the tag, not in attribute:

请记住,在tag 中<textarea>,而不是在属性中:

<textarea>INITIAL VALUE GOES HERE</textarea>

It cannot be self closed as: <textarea/>

它不能自我关闭,因为: <textarea/>



For more information, take a look to this.

有关更多信息,请查看

回答by Fanky

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

使用<div contenteditable="true">支持良好)与存储到<input type="hidden">.

HTML:

HTML:

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

js (using jQuery)

js(使用 jQuery)

$("#multilineinput").on('keyup',function(e) {   
    $("#detailsfield").val($(this).text()); //store content to input[type=hidden]
});
//optional - one line but wrap it
$("#multilineinput").on('keypress',function(e) {    
    if(e.which == 13) { //on enter
        e.preventDefault(); //disallow newlines     
        // here comes your code to submit
    }
});