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>
相关推荐
ssshooter42 分钟前
看完就懂 useSyncExternalStore
前端·javascript·react.js
Live000002 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉2 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化
球球pick小樱花3 小时前
游戏官网前端工具库:海内外案例解析
前端·javascript·css
前端Hardy3 小时前
干掉 Virtual DOM?尤雨溪开始"强推" Vapor Mode?
vue.js·vue-router
喝水的长颈鹿3 小时前
【大白话前端 02】网页从解析到绘制的全流程
前端·javascript
用户14536981458783 小时前
VersionCheck.js - 让前端版本更新变得简单优雅
前端·javascript
codingWhat3 小时前
整理「祖传」代码,就是在开发脚手架?
前端·javascript·node.js
码路飞3 小时前
写了个 AI 聊天页面,被 5 种流式格式折腾了一整天 😭
javascript·python