input框粘贴后无法使用Ctrl + Z撤销内容

yi碗吃不够

已于 2023-06-29 13:12:35 修改

阅读量242

点赞数

文章标签： javascript vue.js 前端

于 2023-06-29 13:11:55 首次发布

本文链接：https://blog.csdn.net/weixin_46194350/article/details/131454342

版权

el-input输入框里自定义了粘贴事件，粘贴文本以后，无法使用Ctrl +z撤回解决办法：

<template>
    <div>
        <el-input
            class="textarea"
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 10 }"
            @paste.native.capture.prevent="paste($event)"
            v-model="textarea"
        >
        </el-input>
    </div>
</template>

<script>
export default {
    data() {
        return {
            textarea: '',
        };
    },
    methods: {
        paste(event) {
            let txt = event.clipboardData.getData('Text');
            const { selectionStart, selectionEnd } = event.target;
            this.textarea =
                this.textarea.substring(0, selectionStart) +
                txt +
                this.textarea.substring(selectionEnd, this.textarea.length);
            // 加上这行解决问题
            document.execCommand('insertHTML', false, txt);
            this.$nextTick(() => {
                event.target.selectionStart = selectionEnd + txt.length;
                event.target.selectionEnd = selectionEnd + txt.length;
            });
        },
    },
};
</script>

<style></style>