2***@qq.com
2***@qq.com
  • 发布:2024-03-25 09:03
  • 更新:2024-03-29 17:04
  • 阅读:1810

uniapp中input输入框如何只输入整数

分类:uni-app
<input  
        v-model="cal"  
        type="number"  
        maxlength="6"  
        @input="onInput"  
      />

在type=“number”中弹出数据键盘,但是小数点可以点击,通过 @input="onInput" 去判断如果有小数点使用正则表达式去掉小数点 cal.value = Number(e.detail.value.replace(/\D/g, ''));

有一种情况当输入 2. 时,即小数点后面没数据,显示的是 2. 但是 e.detail.value拿到的却是2,这样会导致 小数点任可以存在,求助大佬,如何解决只能输入整数,不能输入小数

2024-03-25 09:03 负责人:无 分享
已邀请:
HRK_01

HRK_01

<template>  
  <view class="content">  
    <input v-model="value" @input="onInput">  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      value: 1,  
      cache: 1,  
    }  
  },  
  onLoad() {},  
  methods: {  
    onInput(e){  
      console.log("输入事件",JSON.stringify(e.detail.value));  
      console.log('this.value :>> ', this.value);  
      console.log('this.cache :>> ', this.cache);  
      //兼容ios16  
      if(e.detail.value.indexOf(".")===e.detail.value.length-1 || e.detail.value === ""){  
        this.value = this.cache  
        console.log("输入小数点");  
        return   
      }else{  
        this.cache = this.value  
      }  
    }  
  },  
}  
</script>

写了个方案,你参考一下

  • 2***@qq.com (作者)

    谢谢大佬,尝试了一下,发现这个方法还是有bug存在,主要是 输入 :2. 时2的后面有小数点,小数点后没有数字,input接收到的只是 2 不能接收到2. ,所以导致不能用

    2024-03-26 18:59

  • HRK_01

    回复 2***@qq.com: 已更新回复

    2024-03-29 17:03

要回复问题请先登录注册