问题陈列：
1.输入框换行；
2.内容撑起高度；
3.实时记录输入字数；
问题解决：
1.众所周知，html中的输入控件中只有textarea支持内容换行，那么我们的输入框就不能是传统的input框，
2.在textarea中要实现内容撑开高度的思路就是给textarea设定一定的宽度，然后去动态改变控件高度：
在这里需要用到两个事件：keyup,compositionend.
在keydown和,compositionend动态设置textarea的高度
_input.style.height = _input.scrollHeight + ‘px‘
在这里需要设置一个全局的开关，控制由那个事件去设置高度。
3.实时获取输入字数，这里有个问题：数字键盘和英文键盘是直接输入到textarea中的，而中文字符是需要点击或者按空格才会输入到输入框中，这个问题怎么解决呢，
这就要用到我们前面提到的两个事件：compositionend和compositionstart
compositionstart事件类似于keydown事件在输入阶段进行监控；
compositionstart事件是在输入完成点击空格（pc）或者移动端点击中文后执行；
有了这两个事件实现起来就不难了
_input.addEventListener("keydown",function(e){
if(IsOnce){
if(_input.value.length == 0){
_input.style.height = "auto";
}else{
_input.style.height = _input.scrollHeight + ‘px‘;
}
}
var code = e.keyCode || e.which;
if(_input.value.length > 99){
if(code !=8){
_pSendBtn.classList.add("disable");
_pSendBtn.disabled = true;
_pInputNum.style.display = "block";
if(IsOnce){
_input.style.height = _input.scrollHeight + _pInputNum.offsetHeight +"px";
IsOnce = false;
}
e.preventDefault();
} else {
this.value = this.value.substring(0,this.value.length-1);
_pSendBtn.classList.remove("disable");
_pSendBtn.disabled = false;
_pInputNum.style.display = "none";
IsOnce = true;
}
}else{
_pInputNum.style.display = "none";
_input.style.height = _input.scrollHeight - _pInputNum.offsetHeight +"px";
_pSendBtn.classList.remove("disable");
_pSendBtn.disabled = false;
}
if(chnIpt0 ==false){
countTxt(e);
}
});
_input.addEventListener("compositionstart",function(e){
chnIpt0 = true;
console.log("start")
if(_input.value.length >= 100){
e.preventDefault();
}
},false)
_input.addEventListener("compositionend",function(e){
if(_input.value.length >= 100){
this.value = this.value.substring(0,100);
e.preventDefault();
}
chnIpt0 = false;
countTxt(e);
})
function countTxt(e){
if(chnIpt0 == false){
if(IsOnce){
if(_input.value.length == 0){
_input.style.height = "auto";
}else{
_input.style.height = _input.scrollHeight + ‘px‘;
}
}
document.querySelector(".p-num").innerText = _input.value.length;
}
}
以上是具体实现代码，请大家指正
