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 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
javascript 隔行换色函数代码
Oct 24 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
JavaScript学习笔记之惰性函数示例详解
Aug 27 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 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
PHP4实际应用经验篇(3)
2006/10/09 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
python多线程用法实例详解
2015/01/15 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
python发送邮件实例分享
2017/07/28 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
少先队学雷锋活动总结范文
2014/03/09 职场文书
会计与审计专业自荐信范文
2014/03/15 职场文书
继承权公证书
2014/04/09 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
2016春节放假通知范文
2015/08/18 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
python基础之错误和异常处理
2021/10/24 Python
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
zabbix如何添加监控主机和自定义监控项
2022/08/14 Servers