需求:input框中只能输入小数点 负号 纯数字。
官方无法通过type属性直接实现, 纯数字可以通过type=number, 小数点type=digit, 然而负号是没有的,微信小程序上表现是原生控件,只能使用text文本输入键盘。
注意:@input事件需要return一个值去替换输入框里面的值,让其强制更新, 我因为没有return, 所以在第一次修改值成功,之后就一直没有成功,数据发生变化了,但是视图没有更新。 我还尝试在 input框上绑定一个 :key , 每次修改值 key++,这种强制更新无效。
具体代码:
<input class="uni-input inputClass" v-model="item.val" v-if="item.inputType==='textInput'"
:disabled="item.disabled" type="text"
@input="checkNum($event,mainboardFormList,index)" />
import { debounce, throttle } from 'lodash-es';
const checkNum = debounce(function (e : any, arr : formItemType[], index : number) {
const inputValue = e.detail.value; // 获取输入框的值
const formattedValue = formatInput(inputValue); // 格式化输入值
nextTick(() => {
// 检查是否为有效数字
if (!isNaN(Number(formattedValue)) && formattedValue !== '') {
const numericValue = parseFloat(formattedValue);
arr[index].val = Math.min(Math.max(numericValue, -273), 300); // 限制范围
} else {
arr[index].val = 0; // 如果无效,设置为 0
uni.showToast({
icon: 'error',
mask: true,
duration: 2000,
title: '输入格式错误,必须是数字'
});
}
})
}, 300)
const formatInput = (value : any) => {
if (!value) return '0'; // 如果为空,返回 '0'
// 使用正则表达式过滤掉非法字符,只保留数字、小数点和负号
let filteredValue = value.replace(/[^\d.-]/g, '');
// 确保只有一个小数点
const parts = filteredValue.split('.');
if (parts.length > 2) {
filteredValue = parts[0] + '.' + parts.slice(1).join('');
}
// 确保负号只在开头
if (filteredValue.indexOf('-') > 0) {
filteredValue = filteredValue.replace(/-/g, ''); // 移除多余的负号
filteredValue = '-' + filteredValue; // 保留第一个负号
}
// 转换为数字并限制范围
const num = parseFloat(filteredValue);
if (isNaN(num)) return '0'; // 如果转换失败,返回 '0'
return Math.min(Math.max(num, -273), 300).toString(); // 限制范围并返回字符串
}