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 相关文章推荐
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
vue实现井字棋游戏
Sep 29 Javascript
jquery实现抽奖功能
Oct 22 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
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教程 插件机制在PHP中实现方案
2012/11/02 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
深入理解NumPy简明教程---数组1
2016/12/17 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python中的变量如何开辟内存
2018/06/26 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
django自定义模板标签过程解析
2019/12/14 Python
opencv+python实现均值滤波
2020/02/19 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
django修改models重建数据库的操作
2020/03/31 Python
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
《庐山的云雾》教学反思
2014/04/22 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
辞职信如何写
2015/02/27 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
JS的深浅复制详细
2021/10/16 Javascript