div模拟input输入框

因为一些特殊的样式需求，用div模拟输入框更好控制

GIF.gif

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