Question

我很想知道如何创建一个具有自动调整高度的文本输入，以便它能够更高地适应您的文本？例如，如果我开始键入段落，它会从几行扩展以适合段落。

这是我目前得到的：

#commenttext {
  width: 413px;
  min-height: 22px;
  max-height: 100%;
  display: inline;
  font-size: 11px;
  color: #777777;
  word-wrap: break-word;
  font-family: "Open Sans", "Tahoma";
  top: 7px;
  position: relative;
  left: 7px;
  padding-left: 7px;
}

<form action="" method="POST">
  <input type="text" id="commenttext">
</form>

但那只是一个普通的文本区域。

当我输入更多行时，如何让文本区域变得更高？我需要Javascript吗？

Answer 1

以下是仅限CSS的解决方案：使用div并将contenteditable设置为true。

<div contenteditable="true"
    style="width:200px;min-height:20px;border:1px solid #ccc;"></div>

有关示例，请参阅此JSFiddle。

修改如果您希望能够提交此文本，则需要一些javascript才能将其放入input字段。将其添加到您的表单：

<form onsubmit="document.getElementById('hidden_data').value=document.getElementById('showing_data').innerHTML;"> <input id="hidden_data" name="data" type="hidden"/> <div id="showing_data" contenteditable="true" style="width:200px;min-height:20px;border:1px solid #ccc;"></div> </form>

这会将div的内容放入隐藏的input字段中，以便通过POST将其提交给服务器。

有关示例，请参阅此（已更新）JSFiddle。

Answer 2

在这里看一下这篇文章：

Creating a textarea with auto-resize

它具有完成您想要的所有代码（HTML和Javascript）。

键入时输入字段越高越高

2 个答案: