移动端：对高自适应输入框说不~

时间：2023-04-06 00:11:28 HTML5

1、textarea：核心思想：$(this).height(this.scrollHeight)$textarea.addEventListener('input',function(){varcurrentLength=this.value.length;if(currentLength

.container{位置：相对；最小高度：90px;}.text{字体大小：0;颜色：透明；white-space:pre-wrap;}.textarea{position:absolute;顶部：0；左：0；宽度：100%；高度：100%；调整大小：无；边界：0；outline:none;}/*统一内容样式*/.font-style{font-family:Helvetica;word-wrap:断词；分词：break-all；行高：48px；font-size:32px;}摘自【【北超科技】不简单的自适应高度输入框】(https://juejin.im/post/5b7653...,所以那段时间疯狂的在网上有这个方法，但是这个方法有一个问题，如果我们想给input加背景，比如textarea加背景，那么问题就来了，因为span是一个内联元素，而背景能到达的位置就是span输入的内容范围，内容少还好，内容多了就会爆炸，有一部分一行是没有背景色的。3.偏移方法

.placeholder{width:100px;行高：20px；字体大小：20px；变换：翻译X（-1000px）；}#textarea{宽度：100px；行高：20px；字体大小：20px；}$textarea.on('input',function(){vartext=this.value;$placeholder.innerText=text;varheight=$placeholder.style.height;this.height=height+'px';})这个方法是把textarea和div的样式设置成一模一样，一定要一模一样，然后设置div的offset设置很大，但是不能设置div显示：none，所以我们无法得到它的高度。你想怎么设置就怎么设置，只要把这个东西隐藏起来就行。4.contenteditable还有一个方法就是把div改成可编辑状态，不过这个方法一来我就放弃了，因为需要兼容多机型，有些机型可能不兼容，字数多被输入，就会爆炸，他用的是稀有的DOMNodeInserted，就会爆炸。这些方法在Android上还行，在iOS上全炸了。我想北聊天的兄弟可能没有尝试输入大量文本。一旦输入了很多文字，内容超出了键盘，第一个方法就会闪退。频率，第二种方法直接消失文字，第三种方法在PC端还可以，但是移动端有点卡，当文字太多的时候会直接爆炸。反正一旦文字输入多了，就会开始出现ios的各种情况。所以我总结出来的经验就是对自适应性强的输入框说不，这个需求满足不了，也没有办法。客户端应该可以，因为我看到作文笔记app实现了这个功能。