Elementui如何限制el-input框输入小数点

目录
  • 限制el-input框输入小数点
  • el-input 仅限保留两位小数问题
    • 解决办法

限制el-input框输入小数点

<el-input v-model="value" @keyup.native="value = oninput(value,2)"></el-input>
/**
* oninput 限制输入框小数点位数，多出的过滤掉
* @param  Number     {num}
* @param  Number     {limit}
 */
oninput(num, limit) {
  var str = num
  var len1 = str.substr(0, 1)
  var len2 = str.substr(1, 1)
  //如果第一位是0，第二位不是点，就用数字把点替换掉
  if (str.length > 1 && len1 == 0 && len2 != ".") {
    str = str.substr(1, 1)
  }
  //第一位不能是.
  if (len1 == ".") {
    str = ""
  }
  //限制只能输入一个小数点
  if (str.indexOf(".") != -1) {
    var str_ = str.substr(str.indexOf(".") + 1)
    if (str_.indexOf(".") != -1) {
      str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
    }
  }
  //正则替换
  str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
  if (limit / 1 === 1) {
    str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/,'$1') // 小数点后只能输 1 位
  } else {
    str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1') // 小数点后只能输 2 位
  }
  return str
}

el-input 仅限保留两位小数问题

废话不多说：

 <el-form-item
     label="概率值(100%)"
     rules="[{ required: true, message: '请填写概率值，仅限两位小数'},{pattern:/^\d{1,2}(\.\d{1,2})?$/, message: '概率权重精确到两位小数点，勿超过100'}]"
                    prop="weight">
    <el-input type="number" step="0.01" v-model.number="lotteryBonusCfg.weight" autocomplete="off"></el-input>
</el-form-item>

关键是：正则：/^\d{1,2}(.\d{1,2})?$/

但是这个功能有个bug，就是无法输入0.01，input会直接失去焦点，数字变成0.

解决办法

v-model.number ==》 v-model=“lotteryBonusCfg.weight”

即可输入0.01，或者1.01

以上仅为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • element ui的el-input-number修改数值失效的问题及解决

    element ui的el-input-number修改数值失效的问题及解决

    目录 element ui的el-input-number修改数值失效 问题代码 解决办法 分析说明 官方资料 最新说明 el-input-number组件无法修改默认值为空 element ui的el-input-number修改数值失效 问题代码 目的:实现去掉小数位. <el-input-number v-model="cycle" @change="vaidateCycle" :min="1" :max="3600&quo

  • vue:el-input输入时限制输入的类型操作

    通过@keyup.native的时间动态监控输入的类型 1.手机号码,只能是数字,如果输入了非数字直接清空 2.身份证号码,除了Xx和数字其余的一律清空 3.基于1.2两种情况下,还有一种是动态创建的字段(也就是v-for出来的),解决方法:先使用split形成字段数组,使用for循环找到最后一个点的前面的字段,方便使用$set更新和渲染页面 setDelMsicStr(field,type){ let props let len let value let newphoestr let ite

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

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

  • 关于element-ui表单中限制输入纯数字的解决方式

    我就废话不多说了,大家还是直接看代码吧~ <input type="text" class="el-input__inner" oninput = "value=value.replace(/[^\d]/g,'')" > 补充知识:element form表单验证(数字,手机号,邮箱) 我就废话不多说了,大家还是直接看代码吧~ <template> <div class="hello"> &

  • Angular限制input框输入金额（是小数的话只保留两位小数点）

    需求 输入框要求输入金额,只能输入数字,可以是小数,必须保留小数点后两位. js判断部分: checkInput: function (event) { var id = event.target.getAttribute("id");//获取input的id var reg = /^[-?\d]+(.)?(\d{1,2})?/;//匹配正则while(!reg.test(('#' + id).val()) && ('#' + id).val() != "&q

  • Elementui如何限制el-input框输入小数点

    Elementui如何限制el-input框输入小数点

    目录 限制el-input框输入小数点 el-input 仅限保留两位小数问题 解决办法 限制el-input框输入小数点 <el-input v-model="value" @keyup.native="value = oninput(value,2)"></el-input> /** * oninput 限制输入框小数点位数,多出的过滤掉 * @param Number {num} * @param Number {limit} */ o

  • element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)

    前段时间,在实现带输入建议并且支持模糊查询输入框的时候,发现了两个值得注意的小地方.整理出来,以供借鉴. 废话不多说,直接来解决问题. 踩坑问题描述: 问题一: 获取到后端返回的数组,并将数组传入作为 results 传入 callback 后,焦点放在 输入框 上的时候,并未出现任何内容,只出现了一个不完整的空白框. 问题解决方案: 这个问题开始我以为是传进 callback 的 data 格式不对.Element官网上是这么写的: 我传入的是对象数组,是没问题的. 后来我仔细阅读了 Elem

  • 基于input框覆盖掉数字英文的实例讲解

    例子1: <input type="text" value="0" onkeyup="cleartwoNum(this)"> //限制input框输入只能数字: function cleartwoNum(obj) { obj.value = obj.value.replace(/[^\d]/g, ''); } 例子2:可以输入金额 <input type="text" value="0"

  • 详解elementUI中input框无法输入的问题

    最近发现别人项目中在输入密码的时候发现input框无法输入进去 键盘都快敲坏了还是无法输入 通过各种排查.还是无法解决这个问题 后面无意中发现 elementUI中@input事件可以拿到当前的输入的值 问题找到了 视图没有更新的问题 那么怎么解决了 刷新通过this.$forceUpdate() 可以解决这个问题 这样的话这个问题就解决了 原因可能是由于组件嵌套太深(不是很了解为啥出现这个问题有没有大神解释一波 ) 到此这篇关于详解elementUI中input框无法输入的问题的文章就介绍到这

  • 将input框中输入内容显示在相应的div中【三种方法可选】

    将input框中输入内容显示在相应的div中【三种方法可选】

    例题一枚:在input框中输入内容,会相应的显示在下面的div中的不同做法: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel=

  • js限制input只能输入有效的数字(第一个不能是小数点)

    第一种方法:通过字符搜索判断等实现,适合功能增强 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jq.js"></script> </head> <body> <i

  • 正则表达式解决input框固定输入值得格式(金额,特殊字符)

    在写输入用到input的时候,经常出现以下几种情况: 只能输入某.栗子:只能输入数字,只能输入字母(大写,小写)只能输入某固定格式.栗子:只能输入金额,只能输入小数且最多保留2位不能输入某.栗子:不能输入特殊字符,如"@#￥%&*"等 这种情况下,就需要直接在input上进行限制,在前端的应用中主要是用正则表达式来解决这些问题的 第一种情况:只能输入某 <template> <div id="app"> {{value}} <e

  • vue中input框的禁用和可输入问题

    目录 input框的禁用和可输入 关于输入框的一些操作 input框的禁用和可输入 input是我们经常使用的文本输入框,在vue中我们可以用v-model来绑定输入框的值,但是有时我们拿到一个值并通过v-model绑定到一个input框里,但是我们只想要显示这个值,不能修改,然后在某些特定的情况下在去改变这个值,这个时候就牵涉到文本框的禁用了    <input       type="text"//绑定的值       v-model="Copy.possWord1

  • 在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码

    如何在第一input内输入内容.textarea自动得到第一个文件框的值;      也就是说第一个input边输入textarea边得值      谢谢 <input   type=text   name="mytxt"   onkeyup="myTxta.value=this.value">      <textarea   name='myTxta'>      </textarea> <input   type=&q

随机推荐