關於contenteditable = true中光標異常判定的解決方法

<template>
    <div class="edit-div"
         v-html="innerText"
         :contenteditable="canEdit"
         @focus="isLocked = true"
         @blur="isLocked = false"
         @input="changeText">
    </div>
</template>

我使用的是Vue這是模板代碼

<script type="text/ecmascript-6">
    export default {
        name: 'editDiv',
        props: {
            value: {
                type: String,
                default: ''
            },
            canEdit: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                innerText: this.value,
                isLocked: false
            }
        },
        watch: {
            'value'() {
                if (!this.isLocked || !this.innerText) {
                    this.innerText = this.value;
                }
            }
        },
        methods: {
            changeText(){
                setTimeout(() => {
                    // 在父組件中給予空格,因爲在contenteditable存在首次輸入光標對象判斷異常,在插入數據前進行取出空格
                    this.$emit('input', this.$el.innerHTML.trim());
                }, 5);
            },
        }
    }
</script>

這是JavaScript代碼

 

<style lang="scss" scoped type="text/css">
    .edit-div {
        width: 100%;
        height: 100%;
        overflow: auto;
        word-break: break-all;
        outline: none;
        user-select: text;
        white-space: pre-wrap;
        text-align: left;
        &[contenteditable=true]{
            user-modify: read-write-plaintext-only;
            &:empty:before {
                content: attr(placeholder);
                display: block;
                color: #ccc;
            }
        }
    }
</style>

 

我的解決辦法就是,使用該組件時,v-model綁定數據傳值給該組件,父組件數據給數據加空格

類似以下部分

data(){
    return {
        test: " "
    }
}