Html模拟移动App多行输入框（9行js解决删除文字高度不变的问题）

  最近在使用html技术制作移动端app界面，碰到了输入框的问题，经过网上搜索的方法只实现一部分的效果，灵机一动想到了解决问题的办法，记录一下，让有需要的同学少走弯路。

  我要制作的效果是输入框自适应高度增加减少，当输入大于三行之后保持输入框三行高度，类似QQ聊天的输入框那样，要是没懂就打开手机，进入QQ输入试试。

---

使用textarea多行输入文本框

html及css代码，css可自行修改

<textarea id="message_input" 
		οninput="inputAutoHeight(this);"></textarea>


#message_input{
	width: 96%;
	height: 20px;
	overflow-y:auto;
	font-family:none;  /*  字体设置为默认字体  */
	margin-left: 2%;
	margin-top: 4px;
	margin-bottom: 4px;
	border: 0px;
	outline: none;
	background: transparent;  /*  输入框背景跟随父级  */
	resize:none;    /*  右下角图标去除  */
}

监听 textarea 的 oninput 事件来自适应高度

---

js代码部分

function inputAutoHeight(inputElement){

 	if( parseInt(inputElement.scrollHeight) < 63) {

		inputElement.style.height = '';

		inputElement.style.height = inputElement.scrollHeight+'px';

 	}
 	else{
		
		inputElement.style.height = '62px';

 	}

}

js代码解析（不求甚解的同学可以回头了）

  这里有几个点需要注意，首先是 63 这个数值是刚好 textarea 输入框三行的高度，这个需要看个人对字体大小的设置以及需求。

inputElement.style.height = '';

inputElement.style.height = inputElement.scrollHeight+'px';

  再是 if 内的代码块，第一句代码的是删除文字高度自适应的重要代码，第二句是高度自适应的核心代码，动态将 textarea 的高度设置成滚动框的滚动高度。原理是当高度固定了之后， textarea 输入框的scrollHeight高度会等于当前的高度，所以导致了输入框的高度只能增加而不能降低，通过第一句代码将高度设置为空之后，scrollHeight的高度变成了当前滚动框的高度，可以理解为当前编辑的文本高度，再由第二句代码将高度设置为滚动高度，就可实现自适应的问题。
  还有一个是高度的问题要提一下，即 if 代码块中的第二句赋值需在后面拼接一个 “px” 文本才能生效。

inputElement.style.height = '62px';

  最后是 else 代码块的这一行，为什么要等于 62px 呢？这跟我需要的功能有关系，我所实现的功能是显示三行文本，多余三行文本时输入框要保持三行的高度，不再增加高度，防止用户输入过多遮挡整个屏幕，降低用户体验。
  看的仔细的高手可能就会问了，不写这一行，当scrollHeight的高度大于 63px (也就是三行高度的时候)，不就不再增加高度了吗(因为输入框的高度是在 if 内赋值)？
  没错，大于三行之后是不再增加了，可我要是删除文字呢？因为当高度固定了之后， textarea 输入框的scrollHeight高度会等于当前的高度，所以会导致height的高度始终固定在三行而无法进入 if 语句块动态赋值高度。
  那我要是把这个高度设为空的话不行吗？还可以跟 if 语句块的赋空值合并，减少代码量，增加代码简洁度，何乐而不为？
  你以为我没干过吗？当大于三行之后界面就翻车了，那为什么选 62px ？当然是为了视觉效果和三行差不多啦。其实只要比接近三行的高度略小一点就可以，一点点就够了，这样就能够保证视觉效果上和三行没有区别。

---

后记（都看到这里了，不点个赞分享给朋友吗？）

  除了 textarea 多行文本框可以用作这种效果之外，div 框也能够用以模拟这种多行输入
html代码

<div contenteditable="true" 
		id="message_input" 
		οninput="inputAutoHeight(this);"></div>

经过测试也是效果也是一样的，但是在手机上粘贴消息这类的功能支不支持我就不知道了。