多行文本框是在UI设计中经常使用的一种控件，它可以让用户输入多行文本内容，比如在填写留言板、邮件、评论等场景下常常用到。然而，在开发中，我们并不总是能很好地掌控用户输入的文本长度和行数，因此需要设计一个可自适应大小的多行文本框。那么，如何创建这样一个文本框呢？下面将从设计、实现两个角度探讨一下。

一、设计可自适应大小的多行文本框

1.确定文本框尺寸

在设计文本框时，首先需要确定文本框的尺寸。如果需要自适应大小，那么文本框的高度应该是可调节的，但是宽度可以固定。通常文本框高度的区间应该在2-6行之间，因为太小的话不方便输入，而太大的话会占用不必要的空间。

2.设置行数

一般情况下，一行文本的高度是15~20px之间。如果我们设定文本框的高度为6行，则文本框的高度应该在90~120px之间。如果要自动适应高度，可以通过JS来控制文本框的高度，根据输入的文本行数动态改变文本框的高度，例如通过jQuery实现：

```

$('#textarea').on('input', function() {

this.style.height = 'auto';

this.style.height = this.scrollHeight + 'px';

});

```

这样，当用户输入多行文本时，文本框的高度就会自动适应。

3.添加滚动条

当输入的文本超过文本框的高度时，我们可以为文本框添加滚动条，以便用户能够查看并编辑完整的内容。可以通过CSS样式来控制滚动条的显示：

```

textarea::-webkit-scrollbar {

width: 8px;

}

textarea::-webkit-scrollbar-thumb {

background-color: #e1e1e1;

border-radius: 8px;

}

textarea::-webkit-scrollbar-track {

background-color: #f5f5f5;

border-radius: 8px;

}

```

这段CSS代码会向文本框添加WebKit样式下的滚动条，如果需要支持其他浏览器，可以类似地添加滚动条样式。

二、实现可自适应大小的多行文本框

1. HTML结构

文本框的HTML结构比较简单，只需要一个textarea标签即可：

```html

```

2. CSS样式

接着，开始为文本框添加样式。首先要设置文本框的基本样式，如宽度、边框、字体、行高等：

```css

#text {

width: 300px;

height: 50px;

padding: 10px;

border: 1px solid #ccc;

font-size: 14px;

line-height: 20px;

}

```

接下来，为了实现自适应高度效果，需要为文本框设置resize属性，并将其设置为vertical，这样就可以控制文本框的垂直大小：

```css

#text {

resize: vertical;

}

```

然后，再为文本框添加滚动条样式，以便当文本内容超出文本框高度时，能够滚动显示：

```css

#text::-webkit-scrollbar {

width: 8px;

}

#text::-webkit-scrollbar-thumb {

background-color: #e1e1e1;

border-radius: 8px;

}

#text::-webkit-scrollbar-track {

background-color: #f5f5f5;

border-radius: 8px;

}

```

3. JS实现

最后，为文本框添加JS事件，动态改变文本框的高度。我们需要为文本框绑定input事件，当用户输入内容时，计算文本框的高度和行数，根据行数动态调整文本框的高度：

```js

var textarea = document.getElementById('text');

textarea.addEventListener('input', function() {

var scrollHeight = textarea.scrollHeight;

var lineHeight = parseInt(window.getComputedStyle(textarea)['line-height']);

var rows = Math.floor(scrollHeight / lineHeight);

textarea.style.height = lineHeight * rows + 'px';

});

```

这段JS代码会监听文本框的输入事件，并通过获取文本框的scrollHeight属性来计算文本框的高度，再除以每一行的高度，得到文本框的行数。最后再根据行数和每行高度计算出文本框的高度，并设置到文本框的style属性中就可以实现自适应高度效果了。

总结

通过上述的设计和实现，我们可以创建一个可自适应大小的多行文本框，在用户输入多行文本时能够自动适应高度，且当文本内容过长时能够滚动显示。这样可以提升用户体验和UI设计的质量，也是一种常用的UI设计技巧。