js实现input整数位,小数位位数的控制

2 篇文章 0 订阅
2 篇文章 0 订阅

前言:

公司的需求是输入框整数位只能录到10万位,小数位只能录入小数点后两位(此前已实现),所以结合本次需求,需要对整数位控制进行改造,搜索了js的Number类型的API,没有找到可以直接对整数位进行控制的方法。所以上网查了一番,查到三篇文章,都需要对小数点进行判断。有没有一种方法不需要判断小数点字符?代码也更简洁呢?答案在下面的代码里:

首先定义一个input输入框:

<input type="number" onkeyup="keup(this)" onchange="" name="ceshihehe" oninput="checkNum(this)" style="width: 160px;">

然后定义js脚本:

<script>

function checkNum(inputNum){
    var v = inputNum.value;
    var v1 = Number(v);
    if(v1>999999.999){
      v1= v1/10;
      var  v2 = v1.toFixed(0);
      if((Number(v2)-Number(v1))>0){
          v= Number(v2)-1;
      }else{
          v=Number(v2);
      }
        $("input[name='ceshihehe']").val(v);
    }
}

function keup(obj){
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
}

</script>代码解读:

function checkNum(inputNum){//假设传入参数为:1234567
var v = inputNum.value;//第1步:读取input对象的value,并转换为Number类型赋值给v1
var v1 = Number(v);
if(v1>999999.999){//控制10万位,注意此处小数点为要写到第三位,可以自己动手试试,去掉一个9会有什么现象...
v1= v1/10;//第2步:对v1的大小进行判断,如果超过10万位,则需减位处理,此时为123456.7
var v2 = v1.toFixed(0);//第3步:对除法后的小数位进行四舍五入,此时已进位为123457
if((Number(v2)-Number(v1))>0){//第4步:进位加上了1,所以要减去,才能保证是想要的数字
v= Number(v2)-1;
}else{//假设传入参数为:123456.4,则走进这里
v=Number(v2);
}
$("input[name='ceshihehe']").val(v);//第5步:将处理完的参数传回input框
//没有集成jquery的小伙伴只能用document原生取值咯
}
}
//配合使用正则小数位控制方法
function keup(obj){
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
}

 

网上的三种方法,抽空也参考学习下:

方式1:

https://blog.csdn.net/limingchuan123456789/article/details/11884677

方式2:

https://blog.csdn.net/qizi_zpl/article/details/77774534

方式3:

https://blog.csdn.net/csdn131488/article/details/83507227

 

在使用Element Plus的`el-input`组件进行数字输入时,如果需要限制输入格式为整数位数,小数三位数,可以通过设置`el-input`组件的`type`属性为`number`,并结合`input`事件或`v-model`来限制输入值的格式。Element Plus提供了`min`、`max`、`step`等属性来限制数字的范围和精度,但这些属性并不直接支持复杂的自定义验证。因此,你可能需要额外的JavaScript代码来处理这种复杂的输入限制。 以下是实现这一需求的可能方法: 1. 使用`v-model`进行双向绑定,并通过监听`input`事件来限制输入。 2. 在`input`事件的监听函数中,使用正则表达式或者字符串处理方法来限制用户的输入。 示例代码如下: ```html <template> <el-input v-model="numberValue" placeholder="请输入整数小数三的数字" @input="handleInput" type="number" ></el-input> </template> <script> export default { data() { return { numberValue: null }; }, methods: { handleInput(value) { // 允许用户输入的格式为:0-99999.000-999 const pattern = /^\d{0,5}(?:\.\d{0,3})?$/; if (pattern.test(value)) { this.numberValue = value; } else { // 如果输入不符合规则,则清空输入或提示用户 this.numberValue = value.slice(0, value.lastIndexOf('.') + 4); console.warn('输入格式不正确,请重新输入'); } } } }; </script> ``` 在上述代码中,`handleInput`方法会在每次输入时被触发,并检查输入值是否符合整数位数,小数三位数的规则。如果不符合,则会通过截取字符串的方式,将输入值限制在规定的格式内,并给出警告提示用户。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值