前端队长の技术博客

  1. 实现思路
    1. 方法一
    2. 方法二
  2. 参考链接

textarea使我们常用的表单元素。一般用于多行文字的输入。在绝大多数情况下,都可以满足我们的要求。

但是它有一个缺点是,它的高度是固定了,如果文本内容超出了它设定的高度时,就会显示出丑陋的滚动条。

然后有些时候,为了用户体验,我们需要让它的高度随着文本内容的高度而动态变化。

最经典的场景就是微博PC网页版的发微博的输入框:

image

发微博的输入框会检测输入内容的高度,如果超出的预设的高度,会随着文本的高度的增加而增加,当文本高度减少的时候,文本框的高度也会随着减少。

今天,就来尝试自己实现这个功能。

实现思路

方法一

首先想到的方法就是通过js检测文本的高度,然后动态设置文本框的高度

这是我的第一想法,也是最容易实现的想法。

具体思路:当出现滚动条的时候,文本的实际高度就是**scrollHeight**,我们只需要设置文本框的高度为内容的**scrollHeight**即可。

代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>demo1</title>
    <style>
        textarea {
            width: 200px;
            min-height: 100px;
            padding: 0;
        }
     </style>
</head>
<body>
    <textarea placeholder="input..."></textarea> 
</body>
<script>
    var textarea = document.querySelector('textarea');
    
    textarea.addEventListener('input', (e) => {
        textarea.style.height = '100px';
        textarea.style.height = e.target.scrollHeight + 'px';
    });
 </script>
</html>

注意点:

剩下的方法是我总结的网上一些其他的奇淫技巧,基本上都是一些我认为比较容易实现的,有些太麻烦的我就不列举了。

方法二

方法二的思路是:

注意点:

参考链接

(完)

以上,如果你看了觉得对你有所帮助,就点个赞叭,这样队长也有更新下去的动力,跪谢各位父老乡亲啦~~~ 听说喜欢点赞的人,一个月内都会有好运降临哦 ~~