vue 限制input只能输入正数的操作


Posted in Javascript onAugust 05, 2020

在某些项目中 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使用

如下所示:

<el-input type="number"
 oninput="if(value.length>10)value=value.slice(0,10)"
 @keyup.enter.native="query()"
 onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
 :max="99999999">
 </el-input>

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)))”

<el-input placeholder="请输入密码" v-model="input" :show-password="true"></el-input>

show-password 加上这个属性输入字符进行隐藏一般用于密码框使用

记录问题!

以上这篇vue 限制input只能输入正数的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
js实现日期级联效果
Jan 23 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 #Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 #Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 #Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 #Javascript
js实现简单选项卡制作
Aug 05 #Javascript
vue 内联样式style中的background用法说明
Aug 05 #Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 #Javascript
You might like
PHP中PDO的错误处理
2011/09/04 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
jQuery实现跨域
2015/02/03 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
python文件读取失败怎么处理
2020/06/23 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
开工仪式策划方案
2014/05/23 职场文书
运动会方阵口号
2014/06/07 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书