因?yàn)橐恍┨厥獾臉邮叫枨螅胐iv模擬輸入框更好控制
GIF.gif
1.代碼如下
<div
:contenteditable="true"
class="text-div"
ref="infoAddress"
:data-text="請(qǐng)輸入內(nèi)容"
></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;這個(gè)樣式必須要有，否則ios里面可點(diǎn)擊彈出鍵盤，卻無(wú)法輸入內(nèi)容
用:empty:before 這個(gè)偽類來(lái)模擬placeholder，data-text里面的內(nèi)容就是默認(rèn)提示語(yǔ)
3.如何獲取div內(nèi)容
(this.$refs as any).infoAddress.innerText
