文本框(input,textarea)等的大小随内容自适应

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

代码实现:


<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>

一般有最大最小长宽度限制:
中级实现:
文本框(input,textarea)等的大小随内容自适应_第1张图片
附:
scrollWidth,clientWidth,offsetWidth的区别
解释:
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
文本框(input,textarea)等的大小随内容自适应_第2张图片

你可能感兴趣的:(js,html)