textarea高度自适应 && 元素属性contenteditable介绍

最新推荐文章于 2023-07-24 16:00:31 发布

@Demi

最新推荐文章于 2023-07-24 16:00:31 发布

阅读量1.4k

点赞数 2

分类专栏： JavaScript HTML JQuery

本文链接：https://blog.csdn.net/qq_38128179/article/details/103591717

版权

JavaScript 同时被 3 个专栏收录

61 篇文章 15 订阅

订阅专栏

HTML

9 篇文章 1 订阅

订阅专栏

JQuery

3 篇文章 0 订阅

订阅专栏

近期实现的一个笔录页面如上图所示，考虑到笔录内容肯定会超出一行，所以我选择了使用textareas文本输入框，问题在于textarea不支持自适应高度，就是定好高度或者是行数之后，超出部分就会显示滚动条，看起来不美观。

下面分享2种实现textarea高度自适应的做法，一种是利用JS控制textarea的高度，另一种是用div元素来模拟textarea

一、textarea高度自适应

一个有最小高度（设置其rows属性或min-height）的 textarea 标签，当文字增多出现滚动条时，将它的滚动高度scrollHeight赋给height，以达到textarea高度自适应效果

【1】原生JS

<body>
  <textarea name="" id="record" cols="60" rows="2"></textarea>
  <script>
    document.querySelector('#record').addEventListener('input', function () {
      this.style.height = 'auto';
      this.style.height = this.scrollHeight + 'px';
    })
  </script>
</body>

【2】JQuery

<body>
  <textarea name="" id="record" cols="60" rows="2"></textarea>
  <script>
    $('#record').on('input', function () {
      $(this).css('height', 'auto').css('height', this.scrollHeight + 'px');
    });
  </script>
</body>

【3】Vue

<body>
  <textarea cols="60" rows="2" v-model="recode" @input="handleInput"></textarea>
  <script>
    export default {
      data() {
        return {
          recode: ''
        }
      },
      methods: {
        handleInput(e) {
          e.target.style.height = 'auto';
          e.target.style.height = e.target.scrollHeight + 'px';
        }
      },
    }
  </script>
</body>

二、contenteditable介绍

contenteditable是HTML5新增的全局属性，有true和false两个属性值。用来指定元素内容是否可编辑。

下面是一个简单的示例，创建一个"contenteditable"属性为"true"的div元素，用户就可以编辑其内容了。div元素超出指定width会自动换行，因此不用设置高度自适应

  <div contenteditable="true">
      用户可以在此编辑文本
  </div>

@Demi

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录