记得几年前就碰到过这种需求,现在又碰到了,解决方法就是用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{
/* 只可以输入纯文本