html input高度自适应,模拟input输入框高度自适应

记得几年前就碰到过这种需求，现在又碰到了，解决方法就是用contenteditable属性来模拟textarea或者input来实现根据输入内容高度自适应,因为contenteditable属性的元素有自带的这个属性，但是这种模拟的有很多不确定的元素，比如说用户复制粘贴进去，会直接粘贴进去html，不是纯文本，怎么解决呢？？有三种办法，下面我们来看一下

注: 如果在IOS上用contenteditable 模拟输入框，点击时可以弹出键盘但是无法输入，加一个样式-webkit-user-select:text 就可以了

第一种方法是用css来控制，但是只兼容移动端或者webkit内核的浏览器

html

css

.div{

width:500px;

min-height:100px;

border:1px solid #ccc;

}

.read-only{

/* 就是普通的元素，不能输入 */

-webkit-user-modify: read-only;

}

.read-write{

/* 可以输入富文本，也可以输入纯文本 */

-webkit-user-modify: read-write;

}

.write-only{

/* 可以忽略，没有啥浏览器支持 */

user-modify: write-only;

}

.read-write-plaintext-only{

/* 只可以输入纯文本