vue----获取el-input光标插入文本

最新推荐文章于 2024-07-03 11:08:48 发布

Crazy_LinkFern

最新推荐文章于 2024-07-03 11:08:48 发布

阅读量4.5k

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_32107121/article/details/105506023

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种在Vue框架中实现动态文本插入的方法，通过操作el-input组件的DOM元素，实现在指定位置插入文本，并保持光标位置。此方法适用于需要实时编辑和插入文本的应用场景。

摘要由CSDN通过智能技术生成

insertText(insertTxt) {
    // 获取el-input中的input元素
    let elInput = this.$refs.targetIn.$el.firstElementChild;
    // 获取el-input的值
    let txt = elInput.value;
    // 做插入前做长度校验（如果有这个需要的话）
    if (txt.length + value.length > 64) {
        return;
    }
    // 获取选区开始位置
    let startPos = elInput.selectionStart;
    // 获取选区结束位置
    let endPos = elInput.selectionEnd;
    if (startPos === undefined || endPos === undefined) return;

    // 将文本插入光标位置
    this.subject = txt.substring(0, startPos) + insertTxt + txt.substring(endPos);
    // 将光标移至文本末尾
    elInput.focus();
    elInput.selectionStart = startPos + insertTxt.length;
    elInput.selectionEnd = startPos + insertTxt.length;
}