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的Alert消息框插件使用介绍
Oct 09 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
浅析node.js中close事件
Nov 26 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP可变函数的使用详解
2013/06/14 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
javascript数组去重的方法汇总
2015/04/14 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
Python3离线安装Requests模块问题
2019/10/13 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
python datetime处理时间小结
2020/04/16 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
网络营销策划方案
2014/06/04 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
会计岗位职责范本
2015/04/02 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
php+laravel 扫码二维码签到功能
2021/05/15 PHP