textArea高度自适应最优解决方案

最新推荐文章于 2024-04-18 14:46:56 发布

小唐童

最新推荐文章于 2024-04-18 14:46:56 发布

阅读量1.2k

点赞数

分类专栏： web vue 文章标签： html vue javascript

本文链接：https://blog.csdn.net/weixin_44658445/article/details/119705861

版权

vue 同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

web

5 篇文章 0 订阅

订阅专栏

问题：需求中form表单输入框需要根据输入内容动态调整输入框高度。

方案：动态获取textarea元素的scrollHeight属性值，设置到textarea元素的style.height属性中。

这里需要注意的是在获取scrollHeight属性值之前应将height设置为auto，否则获取的高度会受到元素padding等属性值的影响。

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	</head>
	<body>
	    <div style="display: flex;">
	        <span>留言：</span>
	        <textarea name="content" id="contentInput" oninput="handleHeight()"></textarea>
	    </div>
	    <script>
	        function handleHeight() {
	            //注意，在获取scrollHeight属性值之前应将height设置为auto，否则获取的高度会受到元素padding等属性值的影响
	            contentInput.style.height = 'auto'
	            height = contentInput.scrollHeight
	            contentInput.style.height = `${height}px`
	        }
	    </script>
	</body>
</html>

vant组件中的解决方案

export function resizeTextarea(
  input: HTMLInputElement,
  autosize: true | FieldAutosizeConfig
) {
  input.style.height = 'auto';
 
  let height = input.scrollHeight;
  if (isObject(autosize)) {
    const { maxHeight, minHeight } = autosize;
    if (maxHeight !== undefined) {
      height = Math.min(height, maxHeight);
    }
    if (minHeight !== undefined) {
      height = Math.max(height, minHeight);
    }
  }
 
  if (height) {
    input.style.height = `${height}px`;
  }
}

其他解决方案及可行性调研

方案：通过div模拟textarea文本域轻松实现高度自适应，原理是通过HTML5里面的contenteditable属性将div元素变为可编辑内容元素

可行性：该方案是可行的但是在移动端某些机型上会出现不兼容的情况，直接就是div内容不可编辑，所以应慎重使用。

小唐童

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
textArea高度自适应最优解决方案

问题：需求中form表单输入框需要根据输入内容动态调整输入框高度。方案：动态获取textarea元素的scrollHeight属性值，设置到textarea元素的style.height属性中。这里需要注意的是在获取scrollHeight属性值之前应将height设置为auto，否则获取的高度会受到元素padding等属性值的影响。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF
复制链接

扫一扫