java中限制只能为正数_vue 限制input只能输入正数的操作
在某些项目中 input 框只能输入数字,可以用以下办法:
先在标签上绑定上 @input 事件来监听标签的值变化,通过正则来改变输入的值。
class="keep_input"
v-number-only
style="width:35px"
v-model="scope.row.fileOrder"
@input="scope.row.fileOrder = Number($event.target.value.replace(/\D+/, ''))"
/>
第二部封装个自定义指令放在标签上!
directives: {
numberOnly: {
bind: function(el) {
el.handler = function() {
el.value = Number(el.value.replace(/\D+/, ''))
}
el.addEventListener('input', el.handler)
},
unbind: function(el) {
el.removeEventListener('input', el.handler)
}
}
},
接下来就可以去页面看效果了,只能输入数字且只是正数!
附上 element 的 input 样式代码
.keep_input {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
outline: 0;
padding: 0 15px;
-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
height: 30px;
line-height: 30px;
text-align: left;
}
.keep_input:focus {
border-color: #54a6de;
outline: 0;
}
补充知识:记录el-input type=number限制长度el-input使用
如下所示:
οninput="if(value.length>10)value=value.slice(0,10)"
@keyup.enter.native="query()"
onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
:max="99999999">
oninput 是个自定义事件 在事件里面获取输入的数字长度,来进行判断如果大于规定长度就进行剪切。
keyup.enter.native 是个键盘回车事件,当按下Enter键时触发query()事件。
max为输入框的最大值,如果input的type=number那么输入框内是输入不了字符的。
number框 解决输入e的问题
主要原因是:e在数学上代表的是无理数,是一个无限不循环的小数,其值约为2.7182818284,所以在输入e的时候,输入框会把e当成一个数字看待。
可以采用下面的方式来避免这个BUG,在input标签中添加如下属性:
onKeypress=“return(/[\d.]/.test(String.fromCharCode(event.keyCode)))”
show-password 加上这个属性输入字符进行隐藏一般用于密码框使用
记录问题!
以上这篇vue 限制input只能输入正数的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
java中限制只能为正数_vue 限制input只能输入正数的操作相关推荐
- 在Java中使用标准输入输出设备进行字符串,整数浮点数等 的输入输出操作
在Java中使用标准输入输出设备进行字符串.整数浮点数等的输入输出操作 在Java语言中进行标准输入输出(键盘显示器)需要通过创建输入输出流对象的方式进行,一般情况下我们可以使用 BufferedRe ...
- Java中Arrays.toString ()打印二维数组及Array数组的常用操作
1.Java中Arrays.toString () 已知打印一维数组的API为System.out.println ( Arrays.toString ();,其参数为数组名或数组指针,其支持的数据类 ...
- html 只能输入正数,vue 限制input只能输入正数
在某些项目中 input 框只能输入数字,可以用以下办法: 先在标签上绑定上 @input 事件来监听标签的值变化,通过正则来改变输入的值. 第二部封装个自定义指令放在标签上! directives: ...
- Java中double类型精度丢失的问题_double类型数据加减操作精度丢失解决方法_BigDecimal取整
BigDecimal在用double做入参的时候,二进制无法精确地表示十进制小数,编译器读到字符串"0.0000002"和"1.0000002"之后,必须把它转 ...
- Java中next()和nextLine()的区别(为什么nextLine()输入回车没显示)
前言 博主个人社区:开发与算法学习社区 博主个人主页:Killing Vibe的博客 欢迎大家加入,一起交流学习~~ 一.问题描述: 前几天遇到了一个小问题:为了简化,我手打了一段简单的代码,如下: ...
- java中字符流和字节流的区别_java中字节流和字符流有哪些区别
java中字节流和字符流的区别有:1.定义不同:2.结尾不同:3.处理方式不同:4.缓冲区不同:5.编码方式不同.字节流默认不使用缓冲区,而字符流使用缓冲区.字节流采用ASCII编码,字符流采用uni ...
- java中 基础 知识 逻辑控制
文章目录 逻辑控制 本文 将学习到 选择语句 和 循环语句,最后 还有输入输出 语句. if 语句 如果 满足 if 中的条件 那么 执行 if 语句中的内容, 如果不 满足 if 满足 els ...
- java中next的用法_关于java iterator的next()方法的用法
UYOU next()是java迭代器类(Iterator)的方法,获得当前游标指向的下一个元素,详细说明和应用如下:1.迭代器(Iterator)介绍 迭代器是一种设计模式,它是一个对象,它可以遍历 ...
- Java中逗号运算符的使用
今天看到一道面试题,题目如下: 题目解释: 上面有一个类,有四个成员属性,以及两个构造方法(一个四个参数,一个两个参数),题目给出四个选项,问哪些选项可以满足在在四个参数的构造方法中完成x=a,y=b ...
最新文章
- 学习数据结构 二叉查找树(binary search tree)
- 西安电子地图下载 来自谷歌电子地图库 地图展示15、17、19级
- 微信小程序asp服务器架设,asp写的微信小程序支付demo-服务器端是asp+mdb的
- python绘制剖面图_用python绘制剖面图
- 以前的报表都白做了!app上做可视化数据分析,这个方法太强了
- 你用python做过哪些好玩的事情?
- Access、Trunk、Hybrid三种端口收发规则以及tagged端口和untagged端口的区别
- 访问samba服务器提示无权限使用网络资源
- react--1.react环境搭建、JSX语法、注释、样式、列表渲染、定义单个组件、eact Props、react State
- 欧美风游戏音乐的特点
- 面向对象开发期末复习概述(七)
- 【go-zero】go-zero 敏感词过滤 整合 开源过滤敏感词插件 sensitive
- 堆排序Java实现以及使用场景
- npm项目环境配置时出现报错:Not Found - GET https://registry.npm...
- linux可以怎么玩(以阿里云Ubuntu服务器为例)(三)——Python零代码搞定个人云盘
- C#,Winform 声音、音量控制操作
- 尚硅谷网课笔记 P361-P370
- 英国脱欧后,筒灯BS 476-21耐火报告还有用吗?需要更换成EN 1365-2的报告吗?
- C语言实现植物大战僵尸自动收集阳光(一) 问题分析与寻找基址
- ad15原理图中变压器种类_简单高效1.5v升压电路图大全(七款1.5v升压电路设计原理图详解)...
热门文章
- BP神经网络的一些例子
- Surface book2 1060显卡性能较低的解决方法
- Solr线上环境 Error from server at http://ip:port/solr/core: Expected mime type application/oc
- Linux内核编译与升级
- 江苏全国计算机考试考点,江苏省 全国计算机等级考试考点.xls
- 联想天逸F41a重装win7 x64
- MySQL+c语言——长途汽车管理系统
- 如何高效学习Python?Python入门 Python教程 Python学习路线
- 易驾佳智能机器人教练_用RoboCoach代替驾校教练 易驾佳欲用AI技术改变驾培
- 组合数学——数三角形