文本框（input，textarea）等的大小随内容自适应

最新推荐文章于 2023-09-12 10:26:30 发布

摇曳的精灵

最新推荐文章于 2023-09-12 10:26:30 发布

阅读量8.9k

点赞数 4

文章标签：文本框（input，textarea）等的大小随内容自适应

博客介绍让输入框大小随内容自适应的思路，即获取内容显示所需长度，可借助 scrollWidth。还给出代码实现，一般有最大最小长宽度限制。此外，解释了 scrollWidth、clientWidth、offsetWidth 的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：
为了让输入框的大小和内容匹配，我只需要获取内容显示需要的长度就可以了，如何获取呢？
scrollWidth：
对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text">
<script>  document.querySelector("input").addEventListener("input",function(){
    this.style.width="0px";//让 scrollWidth 获取最小值，达到回缩的效果
    this.style.width=this.scrollWidth+"px";
  });
</script>
	</body>
</html>

一般有最大最小长宽度限制：
中级实现：
在这里插入图片描述
附：
scrollWidth,clientWidth,offsetWidth的区别
解释：
scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。
在这里插入图片描述