el-input仅限输入数字 (输入框仅支持输入数字)

news/2024/9/28 20:52:03/

需求:日常开发中会遇到输入框只能输入数字的功能。常用的方法有下面几种

  • 方式1 (将输入框类型改成number)
javascript"><el-input v-model="number" type="number"/>
  • 方式2 (使用正则控制) 推荐使用该方式
javascript"> <el-input v-model="value1" placeholder="请输入" @input.native="onInput"/>const value1 = ref('')
// 定义输入处理函数
function onInput(event) {value1.value = event.replace(/[^\d.]/g, '');console.log(event, 'event', value1.value)
}
  • 方式3 (使用oninput来实现)
javascript"><el-input v-model="amount" type="text" oninput="value=value.replace(/[^\d.]/g,'')"/>

比较推荐方式二 用正则的方式来做,方式三会有一个问题就是先输入汉字在输入数字,这个时候打印输入框绑定的值就会是空的,用方式二不会出现这个问题,方式一 加上number之后会出现上下箭头,需要用css隐藏过于麻烦而且可能会影响其他样式(不推荐)


http://www.ppmy.cn/news/1531169.html

相关文章

c语言:知识补充

c语言中编译开始会对#define&#xff0c;#include等内容做预处理&#xff0c;可以用#define写一些简单函数&#xff0c;方便使用 #include <stdio.h> #include <stdlib.h>#define MAX(A, B) ((A) > (B) ? (A) : (B))int main(){printf("%d\n", MAX(…

C语言版入门编程题(力扣):数组元素和与数字和的绝对差

1.题目描述&#xff1a; 给你一个正整数数组 nums 。 元素和 是 nums 中的所有元素相加求和。数字和 是 nums 中每一个元素的每一数位&#xff08;重复数位需多次求和&#xff09;相加求和。 返回 元素和 与 数字和 的绝对差。 注意&#xff1a;两个整数 x 和 y 的绝对差定…

Milvus - 四种一致性级别与应用场景解析

在使用 Milvus 时&#xff0c;很多开发者在接触到查询请求中的大量参数时常感到困惑&#xff0c;尤其是 SDK 客户端开发者。本文将重点介绍其中的一个关键参数——Guarantee Timestamp&#xff08;保证时间戳&#xff09;&#xff0c;并详细解释 Milvus 支持的四种一致性级别及…

【Redis】渐进式遍历 数据库管理命令 RESP协议

目录 渐进式遍历 scan 数据库管理命令 切换数据库 获取当前数据库key的个数 删除当前数据库所有的key 删除所有数据库中所有的key RESP协议 渐进式遍历 Redis使用scan命令进行渐进式遍历键&#xff0c;进而解决直接使用keys获取键时可能出现的阻塞问题&#xff08;因为…

VScode开发GD32移植(标准库通用),保姆级!!!!!!!

VScode开发GD32移植(标准库通用)&#xff0c;保姆级&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 文章目录 VScode开发GD32移植(标准库通用)&#xff0c;保姆级&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#…

spring boot文件上传之x-file-storage

spring boot文件上传之x-file-storage 今天看到一个文件上传的开源组件x-file-storage&#xff0c;官方地址如下&#xff1a; https://x-file-storage.xuyanwu.cn/#/ 该组件官网是这样介绍的&#xff0c;如下&#xff1a; 一行代码将文件存储到本地、FTP、SFTP、WebDAV、阿…

Android系统应用安装完成后是如何通知其他应用的?

文章目录 具体步骤如下&#xff1a;相关的系统广播&#xff08;Actions&#xff09;&#xff1a;总结&#xff1a; Android系统在应用安装完成后&#xff0c;会通过 广播&#xff08;Broadcast&#xff09;的方式通知其他应用。这个广播称为"应用安装完成广播"&…

实验报告2-前端框架和模板引擎实现视图

资源下载 实验报告2-前端框架和模板引擎实现视图 一、实现思路 Spring Boot整合Thymeleaf实现图书管理案例。要求&#xff1a; 1、项目使用Spring Boot整合Thymeleaf&#xff0c;项目展示的页面效果全部通过Thymeleaf的模板文件实现。 2、查询所有图书。访问http://localhost:8…