一、背景:
当文本超过文本框高度时,会出现滚动条,移动端看起来很别扭。改为文本框高度自适应,更符合日常的生活习惯。
二、思路
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>