700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > <layui-textarea>文本高度自适应

<layui-textarea>文本高度自适应

时间:2021-06-15 22:20:53

相关推荐

<layui-textarea>文本高度自适应

一、背景:

当文本超过文本框高度时,会出现滚动条,移动端看起来很别扭。改为文本框高度自适应,更符合日常的生活习惯。

二、思路

1、文本添加autoHeight=true属性

2、js:添加文本高度行高随文本添加事件:elem.style.height = elem.scrollHeight + 'px';

三、代码

<html><head><title>测试</title></head><body>//添加自适应高度属性:autoHeight//${tylPostMessage.content}:后端传过来的内容<textarea autoHeight="true" style='overflow-y:hidden'>${tylPostMessage.content}</textarea></body><script>$(function(){$.fn.autoHeight = function(){function autoHeight(elem){elem.style.height = 'auto';elem.scrollTop = 0; //防抖动elem.style.height = elem.scrollHeight + 'px';}this.each(function(){autoHeight(this);$(this).on('keyup', function(){autoHeight(this);});});}$('textarea[autoHeight]').autoHeight();})</script></html>

四、效果对比

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。