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

迈不过友情╰ 2022-01-28 22:39 529阅读 0赞

思路：  
为了让输入框的大小和内容匹配，我只需要获取内容显示需要的长度就可以了，如何获取呢？  
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>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjcxNDYx_size_16_color_FFFFFF_t_70]: /images/20220129/b61ec02e365d4f12a13f31d4d9c8057a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjcxNDYx_size_16_color_FFFFFF_t_70 1]: /images/20220129/b53e94da047341a1a1c1d81748ee28fd.png