在前端开发中，textarea是一个常用的表单元素。但如果输入内容超出了textarea的可见范围，用户就需要手动滚动才能查看全部内容，这对于用户体验来说并不友好。因此，我们可以使用jQuery实现textarea的自动滚动功能。
实现思路
实现自动滚动功能的基本思路是，当textarea内部的文本高度超过其外部容器的高度时，通过设置scrollTop属性来自动滚动textarea。具体步骤如下：
- 获取textarea和外部容器的高度
- 监听textarea的input事件，获取其中文本的高度
- 如果文本高度超过外部容器的高度，则将scrollTop属性设置成文本高度减去外部容器的高度
代码实现
HTML代码如下：
<div class="container"> <textarea id="text"></textarea> </div>
CSS代码如下：
-- -------------------- ---- ------- ---------- - ------- ------ --------- ----- - ----- - ------ ----- ------- ----- -
这里设置了一个高度为200px的外部容器，并给textarea设置了宽度为100%、高度自适应的样式。
JavaScript代码如下：
-- -------------------- ---- -------
------------ -
--- ----- - -----------
--- ---------- - ---------------
----------------- ---------- -
--- ---------- - ----------------------
--- --------------- - --------------------
-- ----------- - ---------------- -
------------------------------- - -----------------
-
---
---首先通过jQuery获取textarea和其外部容器的元素，并监听textarea的input事件。当输入内容改变时，获取文本高度和外部容器高度，并判断是否需要滚动。如果文本高度超过了外部容器高度，则将scrollTop属性设置为文本高度减去外部容器高度。
总结
通过以上代码实现，我们可以让textarea在输入内容超出可见范围时自动滚动，提升用户体验。同时，这也是一个基于jQuery的简单实践，对初学者来说具有一定的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29963