使用jQuery-Mask-Plugin实现0.0~6.0范围的输入格式化需求求助

你当前的代码已经实现了整数部分0-6的限制，但小数部分没有根据整数部分做动态约束，导致出现6.1、0.5这类超出范围的数值。下面是针对性的解决方案，既能保留插件的格式化能力，又能严格限制数值在0.0到6.0之间：

完整实现代码 #

<input type="text" id="test_numeral" placeholder="请输入0.0-6.0之间的数值">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script>
$('#test_numeral').mask('i.d', {
  translation: {
    // 整数部分规则：允许0-6的数字，占位符显示0
    'i': {
      pattern: /[0-6]/,
      placeholder: '0'
    },
    // 小数部分规则：根据整数部分动态调整允许的输入
    'd': {
      pattern: function(value, element) {
        const integerPart = $(element).val().split('.')[0];
        // 如果整数是0或6，小数只能输入0；否则允许0-9
        return (integerPart === '0' || integerPart === '6') ? /[0]/ : /[0-9]/;
      },
      placeholder: '0'
    }
  },
  // 处理粘贴、手动输入等场景的非法值，自动纠正到合法范围
  onChange: function(value) {
    if (!value) return;
    const parsedValue = parseFloat(value);
    if (isNaN(parsedValue)) {
      $(this).val('0.0');
    } else if (parsedValue > 6.0) {
      $(this).val('6.0');
    } else if (parsedValue < 0.0) {
      $(this).val('0.0');
    }
  }
});
</script>

关键改进点 #

• 动态小数约束：通过给小数部分设置动态pattern函数，根据当前输入的整数部分判断允许的小数输入——当整数是0或6时，只能输入0；整数为1-5时，可输入0-9的任意数字。
• 非法值自动纠正：onChange回调处理边界情况，比如用户粘贴6.1、输入负数或非数字内容时，自动将值修正为0.0或6.0，确保最终输入始终符合要求。
• 友好的占位符：给整数和小数部分都设置占位符0，引导用户按正确格式输入。

测试场景验证 #

• 输入6后，小数点后只能输入0，无法输入其他数字
• 输入0后，小数点后只能输入0
• 输入3后，小数点后可输入0-9任意数字（如3.7是合法的）
• 粘贴6.2会自动修正为6.0
• 输入负数会自动修正为0.0

内容的提问来源于stack exchange，提问作者Arton Hoxha