textarea自适应笔记（vue）

最新推荐文章于 2023-11-22 17:03:23 发布

OCEAN__

最新推荐文章于 2023-11-22 17:03:23 发布

阅读量288

点赞数

分类专栏： js 文章标签：前端开发 textarea 交互设计高度自适应事件处理

本文链接：https://blog.csdn.net/oceanyang520/article/details/124464615

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

              <textarea
                  ref="form__input"
                  :name="v"
                  @input="handleInput"
                  @focus="expansionArea"
                  style="width: 95%;font-size: 30px;border-bottom: 0.02rem solid #f1f1f1;"
                  v-model="user[v].jobDesc"
                  placeholder="请输入工作职责"
              ></textarea>

handleInput(e) {
      e.target.style.height = 'auto';
      e.target.style.height = e.target.scrollHeight + 'px';
      document.getElementsByName('del' + e.target.name)
        .forEach(value => value.style.marginTop = e.target.scrollHeight + 'px');
    },
    expansionArea(e) {
      e.target.style.height = 'auto';
      e.target.style.height = e.target.scrollHeight + 'px';
      document.getElementsByName('del' + e.target.name)
        .forEach(value => value.style.marginTop = e.target.scrollHeight + 'px');
    },