js实现替换输入框中选中的文字

如果已知一个文本框内输入值,想点击替换掉里面选中的值,可以采用以下方法;
其实就是获取到选中的开始结束为止,然后使用subString方法进行切割字符串即可

javascript 复制代码
<template>
  <div>
    <el-input v-model="mobileText" ref="input"></el-input>
    <el-button @click="replaceSelection">替换选中文字</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mobileText: '这是一段示例文本。',
      selectionStart: 0,
      selectionEnd: 0,
    };
  },
  methods: {
    // 获取选中的文字的起始和结束位置
    handleSelection() {
      this.selectionStart = this.$refs.input.selectionStart;
      this.selectionEnd = this.$refs.input.selectionEnd;
    },
    replaceSelection() {
      // 获取选中的文字
      const selectedText = this.mobileText.substring(this.selectionStart, this.selectionEnd);
      // 替换选中的文字,这里以"新内容"为例
      const newText = this.mobileText.substring(0, this.selectionStart) + "新内容" + this.mobileText.substring(this.selectionEnd);
      // 更新数据模型中的文本
      this.mobileText = newText;
    }
  }
}
</script>
相关推荐
干就完了11 小时前
关于git的操作命令(一篇盖全),可不用,但不可不知!
前端·javascript
之恒君1 小时前
JavaScript 垃圾回收机制详解
前端·javascript
是你的小橘呀1 小时前
像前任一样捉摸不定的异步逻辑,一文让你彻底看透——JS 事件循环
前端·javascript·面试
Tzarevich1 小时前
JavaScript 继承与 `instanceof`:从原理到实践
javascript
前端老宋Running1 小时前
你的代码在裸奔?给 React 应用穿上“防弹衣”的保姆级教程
前端·javascript·程序员
前端老宋Running1 小时前
“求求你别在 JSX 里写逻辑了” —— Headless 思想与自定义 Hook 的“灵肉分离”术
前端·javascript·程序员
alamhubb1 小时前
前端终于不用再写html,可以js一把梭了,我的ovs(不写html,兼容vue)的语法插件终于上线了
javascript·vue.js·前端框架
汉堡大王95271 小时前
告别"回调地狱"!Promise让异步代码"一线生机"
前端·javascript
syt_10131 小时前
gird布局之九宫格布局
前端·javascript·css