Web移动端实现高度自适应多行文本
初衷:最近刚好有H5项目需求是使用这么一个控件;如果H5仅运行在IOS的话,就没必要大费周章了,只要给dom元素增加contenteditable="true"属性,然后设置样式user-select:"auto"就可以了。这时就会有小伙伴发出疑问了,难道contenteditable属性在Android端就不支持了吗?其实不然,安卓也是支持这个属性的,但会逼死强迫症患者。至于是怎么一回事,下面让博主来揭晓:
问题图片来源(侵权删):http://www.imooc.com/wenda/detail/411576
可以看到,在安卓端失焦时并不会自动消除光标水滴,而且点击了其他dom元素也不一定消除(博主的测试结果是时有时无),是不是逼死强迫症!!!!!!
效果图
一种不得体的解决办法(vue版本)
#利用vue的属性观察和表单控件的数据双向绑定,动态给textarea多行文本框调整高度
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
font-size: 16px;
padding: 0;
}
#app{
position: relative;
height: auto;
font: normal 16px auto;
overflow: hidden;
}
.hide{
padding: 0;
margin: 0;
word-break: break-all;
border-bottom: 1px solid black;
line-height: 21px;
box-sizing: border-box;
opacity: 0;
}
.hide{
min-height: 22px;
white-space:pre-wrap;