解决Element-ui input 在搜狗输入法下,限制输入数字时先输入汉字后无法绑定的问题

在使用 Element UI 的 el-input 组件时,如果需要限制用户只能输入数字,并且确保在输入汉字后再输入数字能够正确绑定,以下提供两种解决方案,需要根据情况适当修改

  1. 监听 input 事件并处理值

    可以在 el-input 组件上监听 input 事件,并在事件处理函数中对用户的输入进行处理,确保只保留数字。

    vue 复制代码
    <template>
      <el-input v-model="inputValue" @input="handleInput"></el-input>
    </template>
    <script>
    export default {
      data() {
        return {
          inputValue: '',
        };
      },
      methods: {
        handleInput(value) {
          const pattern = /^[1-9]\d*$/;
          if (pattern.test(value)) {
            this.inputValue = value;
          } else {
            const num = value.match(/\d+/g);
            this.inputValue = num ? num.join("") : "";
          }
        },
      },
    };
    </script>

    在这个示例中,当用户输入时,handleInput 方法会被调用。该方法使用正则表达式来检查输入值是否为正整数。如果是,就更新 inputValue;如果不是,就提取输入中的数字并更新 inputValue

  2. 使用 blur 事件重新赋值

    第二种方法是在 el-input 组件上使用 blur 事件,当输入框失去焦点时,将输入框的值重新赋值给绑定的变量。这样可以确保即使输入了非数字字符,最终绑定的值也只包含数字。以下是一个示例代码:

    vue 复制代码
    <template>
      <el-input
        v-model="inputValue"
        @blur="inputValue = $event.target.value.replace(/[^\d]/g, '')"
      ></el-input>
    </template>
    <script>
    export default {
      data() {
        return {
          inputValue: '',
        };
      },
    };
    </script>

    在这个示例中,当输入框失去焦点时,会触发 blur 事件,并将输入框的值通过正则表达式处理后重新赋值给 inputValue

相关推荐
yq1982043011563 小时前
使用Django构建视频解析网站 从Naver视频下载器看Web开发全流程
前端·django·音视频
李明卫杭州4 小时前
在 JavaScript 中,生成器函数(Generator Function)
前端·javascript
Lethehong4 小时前
从安装到实测:基于 Claude Code + GLM-4.7 的前端生成与评测实战
前端
恋猫de小郭4 小时前
iOS + AI ,国外一个叫 Rork Max 的项目打算替换掉 Xcode
android·前端·flutter
宇木灵4 小时前
C语言基础-三、流程控制语句
java·c语言·前端
qq8406122335 小时前
Nodejs+vue基于elasticsearch的高校科研期刊信息管理系统_mb8od
前端·vue.js·elasticsearch
Quz5 小时前
QML与JavaScript 交互的四种方式
javascript·qt·交互
会周易的程序员5 小时前
cNetgate插件架构设计详解 动态库 脚本二开lua, python, javascript
javascript·c++·python·物联网·lua·iot
哆啦A梦15887 小时前
Vue3魔法手册 作者 张天禹 012_路由_(一)
前端·typescript·vue3
RaidenLiu7 小时前
别再手写 MethodChannel 了:Flutter Pigeon 工程级实践与架构设计
前端·flutter·前端框架