需求
实现高度随着输入文字的增加而自动变高的输入框。 微信输入为空时，显示placeholder文字数限制maxlength方法1。 使用textarea工具函数autosize实现高度自适应的输入框。 具体代码如下。
！ 文档类型html
html朗='恩'
头部
meta charset='UTF-8 '
标题文档/标题
样式类型='文本/CSS '
* {
margin: 0；
填充： 0；
}
textarea {
resize :无；
}
/样式
/head
脚本类型='文本/JavaScript ' SRC=' JS/Autosize.Min.JS ' /脚本
主体
请输入textarea id=' textarea ' rows='1' placeholder='的内容. ' maxlength='50'/textarea
/body
脚本类型='文本/Javascript '
授权(文档.查询选择器(' # textarea ' )；
/脚本
/html
注：由于textarea的默认高度为rows=2，因此必须将textarea的rows设置为1
方法2:div加属性内容编辑=true
我们知道，可以将div的contenteditable设置为伪true，使其处于可输入状态。 代码如下所示。
div内容编辑=' true '/div
这样满足了我们最初的需求——高度适应。 但是，用手机测试后发现了第一个问题，无法在iOS上输入。 检索资料时，只添加以下样式就知道是：
div {2}
用户选择：文本；
- WebKit -用户选择：文本；
}
实现放大器
利用css js实现播放器。 思路：通过根据输入动态添加class来模拟placeholder的行为。 代码为以下的：
//css
. textarea {
width: 400px；
最小高度： 20px；
最大高度： 300 px；
_height: 120px；
左：自动；
边缘光：自动；
填充： 3px；
轮廓线：0；
订单： 1px固态# a0b3d 6；
字体大小： 12px；
线高度： 24px；
填充： 2px；
魔兽世界：中断世界；
溢流- x :隐藏区；
溢流- y :自动；
酷睿3: RGBA (82，168，236，0.8 )；
box-shadow 3360 inset 01 px3px rgba (0、0、0.1、0 )8pxrgba ) 82、168、236、0.6 )；
位置：相对关系；
用户选择：文本；
- WebKit -用户选择：文本；
}
. placeholder:before {
请输入内容： '的内容. '；
线高度： 30px；
位置：绝对；
left: 5px；
top: 0；
z -索引： 1；
}
//html
divclass=' textarea放置器'内容编辑=' true ' data -放置器='请输入内容. ' data-length=' 10 '
//js
varo inputbox=文档.查询选择器('.textarea )；
onputbox.on input=oinputbox.onpropertychange=函数{
varinnterstr=oinputbox.innertext；
var _this=this；
//放置保持器
if(Innterstr.Length==0) {
_ this.class list.add (放置器)；
} else {
_ this.class list.remove (放置保持器)；
}
(；
这样，第二个需求——就实现了。 可以设置placeholder
实现maxlength
同样，通过直接设置maxlength无法满足需要。 所以，拦截input事件并实时计算长度。
varo inputbox=文档.查询选择器('.textarea )；
onputbox.on input=oinputbox.onpropertychange=函数{
varinnterstr=oinputbox.innertext；
var _this=this；
//maxlength
varlen=parseint (_ this.getattribute (数据长度)；
if (interstr .长度指示灯) {
onputbox.innertext=interstr.substring (0，len )；
}
(；
上面的代码看起来没问题，但是光标放在最前面，您会发现用户体验会变差，或者出现错误。 因此，在剪切最大长度的用户输入后，必须将光标放在最后。 完整的JS代码如下。
varo inputbox=文档.查询选择器('.textarea )；
onputbox.on input=oinputbox.onpropertychange=函数{
varinnterstr=oinputbox.innertext；
var _this=this；
//放置保持器
if(Innterstr.Length==0) {
_ this.class list.add (放置器)；
} else {
_ this.class list.remove (放置保持器)；
}
//maxlength
varlen=parseint (_ this.getattribute (数据长度)；
if (interstr .长度指示灯) {
onputbox.innertext=interstr.substring (0，len )；
}
//div innerText重新赋值后的光标问题
if (导航器.用户代理.索引为(' msie ' )-1 ) )。
var范围=文档. selection.create范围(；
_ this.last=范围；
range.movetoelementtext(_this；
range.select (；
document.selection.empty (； //取消勾选
} else {
var范围=文档.创建范围(；
range.selectnodecontents(_this；
range.collapse (假；
var sel=window.getSelection (；
移除所有范围(；
添加范围(范围；
}
(；
现在，您可以自动增加高度，并完成了支持placeholder和maxlength的输入框。
要点总结：
方法1:autosizejs方法拦截textarea的input、keyup事件动态获取其scrollHeight，计算实际高度并根据overflow属性的变更动态改变textarea的高度。 使用该方法时需要注意的是将textarea的rows属性设定在1、2行以内兼容性： IE9方法2:div将contentEditable设定为true后，输入或删除内容时，其高度本身会根据内容的变化而变化， 要解决的问题只有光标在输入中的位置。 兼容性： IE11和其他高级浏览器
希望本文能帮助到您！
点赞被传送，让更多的人可以看到这个内容()集合不点赞，而是耍赖-_-) ) )。关注{我}，享受文章的最初体验！
每周重点克服一个前端技术难点。 私信更多精彩的前端内容并回复“教程”
原文链接： http://eux.baidu.com/blog/fe/实现高度适应的输入框
作者：幸福的心型摇滚