uniapp,uview:inputnumber或者input,当type为number的时候,在ios里输入不了小数的问题

本文主要是介绍uniapp,uview:inputnumber或者input,当type为number的时候,在ios里输入不了小数的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

项目场景:

在做uniapp的H5页面时,有个需求是要输入框要能支持可以保留两位小数输入,不能输入负数和其他字符。心想这简单,直接用uview的inputnumber组件这不就好了,结果测试提bug说不能输入小数点,我心想我的发,自己的不是可以吗,结果去试了一下,确实不能输入。ios里只能弹出自带的数字键盘,而且还是没有小数点的`

于是按照惯例,百度开发工程师开始了,开始百度搜索问题:搜到是说type不能为number,把number设置成digit就好了,官方图如下

在这里插入图片描述

嗯哼,改了之后,自己手机试了一下。不错,有效果,可以切换到其他输入法了,信心满满的把bug给点解决了,后来测试小姐姐又说这不行啊,我说怎么可能,为啥我滴可以,我看了之后确实不行,本地偶尔行。测试环境却不行

原因分析:

找了很久,发现其实就是ios没有对用户场景做比较全面的支持。于是一不做二不休,干脆自己做个组件算了,使用type=text,这下总不会限制键盘的方式了吧?


解决方案:

直接自己做一个组件,type=text,做个样式和uview的inputnumber组件一样的,vue代码如下

组件:

<template><view class="container"><button @click="decrement" :disabled="isDisabled" class="btn no-space">-</button><input v-model="number" @input="handleInput" class="input" type="digit" step="0.01" /><button @click="increment" class="btn">+</button></view>
</template><script>
export default {props: {value: {type: Number,default: 1,},},data() {return {number: this.value,isDisabled: this.value === 0,};},watch: {number(newVal) {// 当 number 发生变化时,手动触发 v-model 绑定的更新this.$emit("input", newVal);}},methods: {handleInput(event) {// 获取用户输入的值let inputValue = event.target.value;// 移除非数字和小数点(禁止负数)let cleanedInputValue = inputValue.replace(/[^0-9.]/g, '');// 检查小数点的数量,保留一个小数点const parts = cleanedInputValue.split('.');// 限制整数部分最多五位数if (parts[0].length > 5) {parts[0] = parts[0].substring(0, 5);}// 限制小数部分最多两位数if (parts.length > 1 && parts[1].length > 2) {parts[1] = parts[1].substring(0, 2);}// 重新组合整数部分和小数部分cleanedInputValue = parts.join('.');// 将 cleanedInputValue 转换为浮点数const numberValue = parseFloat(cleanedInputValue);const formattedNumberValue = isNaN(numberValue) ? 0 : parseFloat(numberValue.toFixed(2));// 更新组件数据this.number = formattedNumberValue;this.$emit("change", this.number);},canIncrement() {return this.number < 99999;},canDecrement() {return this.number > 0;},increment() {if (this.canIncrement()) {this.number = parseFloat(this.number || 0) + 0.01;this.number = parseFloat(this.number.toFixed(2));this.$emit("input", this.number);}},decrement() {if (this.canDecrement()) {this.number = parseFloat(this.number - 0.01).toFixed(2);this.$emit("input", this.number);}},handleChange(e) {this.$emit("change", { value: this.number || 0, index: '' });this.isDisabled = parseFloat(e.target.value) === 0;},},
};
</script><style lang="scss" scoped>
.no-space {letter-spacing: 0;
}uni-button:after {border: none !important;
}.container {display: flex;align-items: center;justify-content: space-between;width: 100%;
}.btn {width: 60rpx;display: flex;flex-direction: row;justify-content: center;align-items: center;border-radius: 8rpx 0 0 8rpx;background: rgb(242, 243, 245);height: 60rpx;color: rgb(50, 50, 51);
}.btn2 {font-weight: bold;font-size: 32rpx;
}.input {position: relative;text-align: center;padding: 0;margin: 0 3px;display: flex;flex-direction: row;align-items: center;justify-content: center;color: rgb(50, 50, 51);font-size: 14px;background: rgb(242, 243, 245);height: 28px;width: 42px;
}
</style>

使用方式:

<input-number v-model="list.time" @change="valChange"></input-number>

欧克欧克,完美解决问题。测试小姐姐说我不仅人长得帅,该bug也快

这篇关于uniapp,uview:inputnumber或者input,当type为number的时候,在ios里输入不了小数的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1109193

相关文章

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问

usaco 1.2 Name That Number(数字字母转化)

巧妙的利用code[b[0]-'A'] 将字符ABC...Z转换为数字 需要注意的是重新开一个数组 c [ ] 存储字符串 应人为的在末尾附上 ‘ \ 0 ’ 详见代码: /*ID: who jayLANG: C++TASK: namenum*/#include<stdio.h>#include<string.h>int main(){FILE *fin = fopen (

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

【测试】输入正确用户名和密码,点击登录没有响应的可能性原因

目录 一、前端问题 1. 界面交互问题 2. 输入数据校验问题 二、网络问题 1. 网络连接中断 2. 代理设置问题 三、后端问题 1. 服务器故障 2. 数据库问题 3. 权限问题: 四、其他问题 1. 缓存问题 2. 第三方服务问题 3. 配置问题 一、前端问题 1. 界面交互问题 登录按钮的点击事件未正确绑定,导致点击后无法触发登录操作。 页面可能存在

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库,瞬间耗尽数据库资源,导致数据库无法使用。 解决方案: 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内,大量缓存数据同时失效,导致所有请求直接涌向数据库,瞬间增加数据库的负载压力,可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

题目1254:N皇后问题

题目1254:N皇后问题 时间限制:1 秒 内存限制:128 兆 特殊判题:否 题目描述: N皇后问题,即在N*N的方格棋盘内放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在同一斜线上。因为皇后可以直走,横走和斜走如下图)。 你的任务是,对于给定的N,求出有多少种合法的放置方法。输出N皇后问题所有不同的摆放情况个数。 输入