如何修改jQuery按键事件实现0-100内两位小数非负数值输入限制
修改后满足需求的完整代码
$(document).on('keyup','.percentage-value,#edit_value_percentage',function(e){ // 豁免Tab键,不影响表单正常焦点跳转逻辑 if (e.keyCode === 9 || e.which === 9) { return; } const inputVal = this.value.trim(); // 空值不做处理直接返回 if (!inputVal) return; // 校验输入格式,仅允许数字、最多1个小数点、小数点后最多2位 const formatReg = /^\d*\.?\d{0,2}$/; if (!$.isNumeric(inputVal) || !formatReg.test(inputVal)) { // 若输入超过两位小数,自动截断而非清空,优化使用体验 if (inputVal.includes('.')) { const [integerPart, decimalPart] = inputVal.split('.'); this.value = `${integerPart}.${decimalPart.slice(0,2)}`; } else { this.value = ''; } return; } // 校验数值范围 const numVal = parseFloat(inputVal); if (numVal < 0) { this.value = ''; return; } if (numVal > 100) { // 超过最大值自动修正为100,也可根据业务需求改为清空 this.value = '100'; return; } });
实现逻辑说明
- 保留了原有代码对Tab键的豁免规则,不会干扰用户正常切换表单焦点
- 新增小数位数校验,通过正则限制最多输入两位小数,超出部分自动截断,比直接清空更符合用户使用习惯
- 替换原有
parseInt为parseFloat适配小数场景,数值范围严格限制在0-100之间:负数自动清空,超过100自动修正为100(也可根据业务需要调整为清空) - 兼容小数点开头的合法输入(如
.35会被识别为0.35),覆盖常规百分比输入场景
内容的提问来源于stack exchange,提问作者B L Praveen
相关产品推荐
相关产品推荐

