CSS & JS Effect – Textarea Autoresize

前言

这是一个很普遍的体验, 而且实现起来也很简单哦

 

参考

YouTube – How to Auto Resize Textarea using HTML CSS & JavaScript

 

效果

我故意加了 border 和 padding 来解释.

 

Step by Step 实现

HTML

<textarea class="stg-text-area-autoresize" rows="4"></textarea>

CSS Style

复制代码
textarea {
  font-size: 1.5rem;
  padding-inline: 1rem;
  background-color: pink;
  border-inline: unset;
  outline: unset;

  // 我刻意加入 border padding 来让情况变得复杂
  padding-top: 15px;
  padding-bottom: 20px;
  border-top: 15px solid red;
  border-bottom: 20px solid red;
}
复制代码

效果

JavaScript

复制代码
const textarea = document.querySelector('textarea');
// 监听, 每一次 input 的时候看需不需要 resize
textarea.addEventListener('input', () => {
  // 先把 height 设置成 auto, 这样就可以还原小
  textarea.style.height = 'auto';

  // 获取当前的 border block
  const { borderTopWidth, borderBottomWidth } = window.getComputedStyle(textarea);

  // 在把 height 设置成 scrollHeight 让它变大
  // 之所以需要加 border 是因为 height 在 border-box 情况下是要包括 border 高度的.
  // 而 scrollHeight 只有到 padding 的高度
  textarea.style.height = `${
    textarea.scrollHeight + parseFloat(borderTopWidth) + parseFloat(borderBottomWidth)
  }px`;
});
复制代码

关键就在改变 textarea height

auto 变小

scrollHeight 变大

如果想了解 height, scrollHeight 是如何计算的, 可以看这篇: DOM – Dimension (offset, client, computed, rect)

 

posted @   兴杰  阅读(100)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2021-11-05 ASP.NET Core – Web API 冷知识
2019-11-05 Angular 学习笔记 (Angular 9 & ivy)
点击右上角即可分享
微信分享提示