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>
相关推荐
十一.3668 小时前
131-133 定时器的应用
前端·javascript·html
2503_9284115610 小时前
12.22 wxml语法
开发语言·前端·javascript
光影少年10 小时前
Vue2 Diff和Vue 3 Diff实现及底层原理
前端·javascript·vue.js
2501_9462243110 小时前
旅行记录应用统计分析 - Cordova & OpenHarmony 混合开发实战
javascript·harmonyos·harvester
傻啦嘿哟10 小时前
隧道代理“请求监控”实战:动态调整采集策略的完整指南
前端·javascript·vue.js
JIngJaneIL10 小时前
基于java + vue个人博客系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
C_心欲无痕10 小时前
vue3 - readonly创建只读的响应式对象
前端·javascript·vue.js
TAEHENGV11 小时前
进度跟踪模块 Cordova 与 OpenHarmony 混合开发实战
android·javascript·数据库
2501_9462243111 小时前
旅行记录应用外观设置 - Cordova & OpenHarmony 混合开发实战
javascript·harmonyos·harvester