Question

我已经创建了一个带输入的表单，但该框只处理单行中的文本。我想设置它的样式，以便输入字段类似于Twitter的输入字段，其中框本身是多行：

当你点击输入时它也会扩展：

这是我目前所拥有的：

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

我已经设定了按钮和输入的样式，但没有做任何改变其形状的事情，所以它默认情况下。我需要做些什么才能实现这个目标？

Answer 1

您需要使用HTML <textarea>元素。

来自MDN：

<textarea>

HTML <textarea>元素表示多行纯文本   编辑控制。

本地不可能使用<input>用于多行文字，如果被黑客攻击，则HTML将无效。

HTML5规范：

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

input元素表示一行纯文本编辑   控制元素的价值。

（强调我的）

Twitter输入框

你提到你希望textarea类似于Twitter（自动调整大小/没有滚动条）。考虑此选项和以下SO帖子：

Autosize

用于自动调整textarea高度的小型独立脚本。

Answer 2

根据要求使用TextArea.Alter行和列属性。

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

要添加悬停效果并更改框大小，请使用css。指定正常的高度和宽度，并在焦点上更改它。

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

Answer 3

使用<div contenteditable="true">（supported well）存储到<input type="hidden">。

HTML：

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

js（使用jQuery）：

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

如果有人想用它来包装一行并使用Enter提交或继续填写表格，则要添加以下内容：

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

使输入元素（type =＆＃34; text＆＃34;）处理多行文本

3 个答案: