el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变

使用<el-input type="textarea">组件来自Vue的Element UI库时,如果想在输入时实时监听输入并替换某些内容,同时又希望保持光标位置不变(即在内容被替换后光标不自动跳到内容的最后位置),可以通过以下方式来实现:

方法1:使用input事件和setSelectionRange方法

在Vue中,监听input事件,然后使用JavaScript的setSelectionRange方法来设置光标位置。

复制代码
<template>
  <el-input
    type="textarea"
    ref="myTextarea"
    v-model="inputText"
    @blur="handleblur"
    @input="handleInput"
  ></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      inputText: ''
    };
  },
  methods: {
    handleInput() {
      // 获取光标位置
      let cursorPosition = this.$refs.myTextarea.$refs.textarea.selectionStart;
      // 对输入内容进行替换处理,这里以简单的中文逗号替换英文逗号为例
      this.inputText = this.inputText.replace(/,/g, ',');
      // 恢复光标位置
      this.$nextTick(()=>{
        this.$refs.myTextarea.$refs.textarea.setSelectionRange(cursorPosition, cursorPosition)
      })
    },
    handleblur() {
      // 失去焦点,处理多个逗号和连续超过两个逗号替换成只要一个逗号
      if(this.inputText) {
        this.inputText = this.inputText.trim().replace(/\s*(,)\s*/g, ',').replace(/,{2,}/g, ',')
      }
    },
  }
};
</script>
方法2:使用计算属性控制显示值和内部值分离

如果不在input事件中直接操作DOM,可以通过计算属性来控制显示的文本和实际的文本存储在不同的变量中。

复制代码
<template>
  <el-input
    type="textarea"
    ref="myTextarea"
    v-model="inputText"
    @blur="handleblur"
    @input="handleInput"
  ></el-input>
</template>
 
<script>
export default {
  data() {
    return {
      inputText: '', // 显示给用户的文本,可能经过处理或未处理
      internalText: '', // 实际存储的文本
    };
  },
  watch: {
    internalText(newVal) {
      this.inputText= newVal; // 确保视图更新时,显示的文本也是最新的内部文本
    }
  },
  methods: {
    handleInput() {
      // 处理文本
      let newValue = this.$refs.myTextarea.$refs.textarea.value.replace(/,/g, ',');
      // 获取光标位置
      let cursorPosition = this.$refs.myTextarea.$refs.textarea.selectionStart;
      // 更新显示值(但不触发渲染)
      this.$refs.myTextarea.$refs.textarea.value = newValue;
      // 恢复光标位置
      this.$nextTick(()=>{
        this.$refs.myTextarea.$refs.textarea.setSelectionRange(cursorPosition, cursorPosition)
      })
      // 更新内部存储的文本值,不会触发视图更新,除非通过watch监听器
      this.internalText = newValue;
    },
    handleblur() {
      // 失去焦点,处理多个逗号和连续超过两个逗号替换成只要一个逗号
      if(this.inputText) {
        this.inputText = this.inputText.trim().replace(/\s*(,)\s*/g, ',').replace(/,{2,}/g, ',')
      }
    },
  }
};
</script>
相关推荐
做运维的阿瑞6 小时前
Windows 环境下安装 Node.js 和 Vue.js 框架完全指南
前端·javascript·vue.js·windows·node.js
武昌库里写JAVA6 小时前
Java设计模式之工厂模式
java·vue.js·spring boot·后端·sql
Dontla7 小时前
Tailwind CSS介绍(现代CSS框架,与传统CSS框架Bootstrap对比)Tailwind介绍
前端·css·bootstrap
yinuo8 小时前
uniapp微信小程序安卓手机Touchend事件无法触发
前端
你的人类朋友10 小时前
【Node】Node.js 多进程与多线程:Cluster 与 Worker Threads 入门
前端·后端·node.js
闲人编程10 小时前
使用Celery处理Python Web应用中的异步任务
开发语言·前端·python·web·异步·celery
excel10 小时前
前端读取文件夹并通过 SSH 上传:完整实现方案 ✅
前端
一只游鱼10 小时前
vue+springboot项目部署到服务器
服务器·vue.js·spring boot·部署
谢尔登10 小时前
【Nest】日志记录
javascript·中间件·node.js
双向3310 小时前
【征文计划】基于Rokid CXR-M SDK 打造AI 实时会议助手:从连接到自定义界面的完整实践
前端