因为一些特殊的样式需求,用div模拟输入框更好控制
1.代码如下
<div
:contenteditable="true"
class="text-div"
ref="infoAddress"
:data-text="请输入内容"
></div>
contenteditable="true"表示可以编辑
2.样式:
.text-div {
min-height: 0.3rem;
width: 100%;
outline: none;
word-break: break-all;
-webkit-user-select: text;
&:empty:before {
content: attr(data-text);
color: rgba(0, 0, 0, 0.5);
}
}
注意: -webkit-user-select: text;这个样式必须要有,否则ios里面可点击弹出键盘,却无法输入内容
用:empty:before 这个伪类来模拟placeholder,data-text里面的内容就是默认提示语
3.如何获取div内容
(this.$refs as any).infoAddress.innerText