vue如何限制只能输入正负数及小数

<el-input keyup.native="isFloor"/>

//正数，含小数

isFloor(e,type){
   if(type=='floor') {
    var val=e.target.value;
    //限制只能输入一个小数点
    if (val.indexOf(".") != -1) {
     var str = val.substr(val.indexOf(".") + 1);
     if (str.indexOf(".") != -1) {
      val = val.substr(0, val.indexOf(".") + str.indexOf(".") + 1);
     }
    }
    e.target.value = val.replace(/[^\d^\.]+/g,'');
   }

  },
//正负数，含小数

isFloor(){
 var obj=event.target;
 var t = obj.value.charAt(0);
 obj.value = obj.value.replace(".", "$#$")//把第一个字符'.'替换成'$#$'
               .replace(/\./g, "")//把其余的字符'.'替换为空
               .replace("$#$", ".")//把字符'$#$'替换回原来的'.'
               .replace(/[^\d.]/g, "")//只能输入数字和'.'
               .replace(/^\./g, "")//不能以'.'开头
               .replace( /([0-9]+\.[0-9]{2})[0-9]*/,"$1")//只保留2位小数
 if (t == '-') {
  obj.value = '-' + obj.value;
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 实现边输入边搜索功能的实例讲解

    效果图: 搜索分类2种情况,一般的是当用户输入完,点击确定的按钮在向后发送请求,还有一种就是的我一边输入,一边向后台发送请求,但是会产生一个性能的问题,就是一直发请求造成页面的卡顿,这里就是使用截流函数,当用户每次点击键盘之间超过300ms就发送请求,否则不请求 search.vue <template> <div id="search"> <input type="text" class="search" plac

  • vue.js 实现输入框动态添加功能

    代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-demo</title> </head> <body> &

  • 详解Vue取消eslint语法限制

    由于vue对语法的限制过于严格,以至于在我第一次编译运行的时候一直编译失败,当然也包括一些警告: ➜ my-project npm run dev > bblee-app@1.0.0 dev /Users/bianlifeng/my-project > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 95% emitting WARNING Compiled with 1 warnings 5:

  • 解决vue中监听input只能输入数字及英文或者其他情况的问题

    如下所示: 1. <input placeholder="请输入条形码" class="disPriceStyle" v-model = 'searcBarCode'></input>. (只能输入数字,英文) <input placeholder="请输入商品条形码" class="disPriceStyle" maxlength="20" v-model = 'search

  • Vue表情输入组件 微信face表情组件

    Vue表情输入组件 微信face表情组件

    VUE表情包输入组件,先来张成品图看看. 年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧. 注意: 1. 项目是用vue-cli3.0搭建起来的项目, 参考cli3.0官网地址 2.样式是用scss需要安装依赖: npm install node-sass sass-loader -D 思路: 页面内容总体分为三块区域(内容区,表情区,输入区),引入JSON文件表情库渲染到页面,给每个表情绑定点击事件并传递下标,将用户点击过的表情存放到一个数组中,赋值给input标签的v

  • vue指令只能输入正数并且只能输入一个小数点的方法

    最近在做一个金额查询,验证的时候总是出现很多问题,如输入-号后,input框里是没有了,但是在model里还是绑定了,提交的时候就会报错,真的是让人很是郁闷,小数点也是input框过滤掉了,但是提交的时候也会出现.不过经过努力终于找到了一种解决方案,在这里``和大家分享一下下. Vue.directive('numbers', { bind: function (el, binding) { console.log('ere') }, inserted: function (el) { // e

  • vue中Element-ui 输入银行账号每四位加一个空格的实现代码

    一.问题描述: 我们在输入银行账号会设置每四位添加一个空格,输入金额,每三位添加一个空格.那么,在vue,element-ui 组件中,如何实现呢? 二.效果图: 三.实现代码: <el-table-column prop="account" label="银行账号"> <template slot-scope="scope"> <el-input type="text" maxlength=&q

  • vue如何限制只能输入正负数及小数

    <el-input keyup.native="isFloor"/> //正数,含小数 isFloor(e,type){ if(type=='floor') { var val=e.target.value; //限制只能输入一个小数点 if (val.indexOf(".") != -1) { var str = val.substr(val.indexOf(".") + 1); if (str.indexOf(".&qu

  • vue限制输入框只能输入8位整数和2位小数的代码

    看到这个标题好像很简单,onblur.onchange事件都能做到,但是用户体验感貌似很差.查了下百度查不到资料了.看了下vue的基础,发现 vue 有个 watch 监听器好吧,从这里入手 用v-model 加watch 就可以很简单的实现这一个功能. ----代码省略 <input id="amt" type="number" v-model="amount"/> ----代码省略 data:{ return{ amount:&q

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

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

  • vue.js实现只能输入数字的输入框

    在菜鸟教程里,看了vue.js的教程,看完后,练练手,就试着实现了只能输入数字的输入框.在之前的博客里,用jquery也实现了这样的功能,这里用vue.js来实现,把实现的过程记录下来 如果只是一个输入框,要实现就非常的简单了,输入框的内容和数据绑定,给数据加一个监听器就可以了,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue</t

  • jquery限定文本框只能输入数字（整数和小数）

    本文实例介绍了jquery限定文本框只能输入数字的详细代码,分享给大家供大家参考,具体内容如下 先来一段规定文本框只能够输入数字包括小数的jQuery代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>我们</title> <script type="text/javascript" src="myte

  • jquery限定文本框只能输入数字即整数和小数

    复制代码 代码如下: $(function(){ //文本框只能输入数字(不包括小数),并屏蔽输入法和粘贴 $.fn.integer= function() { $(this).css("ime-mode", "disabled"); this.bind("keypress",function(e) { var code = (e.keyCode ? e.keyCode : e.which); //兼容火狐 IE if(!$.browser.ms

  • Vue ElementUI实现:限制输入框只能输入正整数的问题

    input输入框中禁止输入小数和负数(*只允许输入正整数 *) 最近在做项目中碰见了这么个问题,需要输入数字,但是只能输入正整数,在网上找的没找到自己想要的,所以就自己想了两个办法,在这里跟大家分享一下.(因为是刚毕业,第一次写博客,所以有点生疏,请各位大佬担待一些) 方法一:利用禁止按键的方法,主要是依靠禁止按下减号以及小数点来完成的 首先要监听keyup(键盘按下)事件,因为elementUi上面的input组件监听事件是没有这个事件的,所以可能会报错,所以我们需要加个vue事件的修饰符 .

  • JS验证 只能输入小数点,数字,负数的实现方法

    如下所示: <script language="JavaScript" type="text/javascript"> function clearNoNum(event, obj) { //响应鼠标事件,允许左右方向键移动 event = window.event || event; if (event.keyCode == 37 | event.keyCode == 39) { return; } var t = obj.value.charAt(0

  • 浅谈vue限制文本框输入数字的正确姿势

    最近遇到一个需求,需要限制文本框输入数字,而number类型的输入框有箭头,个人不是很喜欢,因此想要寻求其它途径实现.本想通过网上找个现成的插件,然而百度,谷歌一番都没有找到满意的答案,至于随手一搜出来的方案或多或少都有点缺陷.因此自己动手,丰衣足食. 事件选型 首先我们很容易想到通过事件来达到目的,大致可以通过以下几个事件来实现: keypress/keydown 思路:按键按下的时候触发,通过判断按下的是否是数字返回true/false来限制用户的输入. 缺点:无法限制用户复制粘贴的数据.

随机推荐