如何在jquery-inputmask中当剩余数值为0时禁用退格键？

问题描述 #

当前使用Inputmask实现了一个不允许以0开头的货币输入框，配置代码如下：

$('#currency').inputmask({
  regex: '^[1-9][0-9]*([,.][0-9]{1,2})?$',
  rightAlign: false,
  placeholder: '',
  min: 1,
  inputmode: 'decimal',
  casing: function (elem) {
    if(elem == ',') return '.';
    return elem;
  }
});

但存在一个问题：当用户输入如10、20、100这类以0结尾的数值后，删除前面的非0数字会只剩0，违反了输入框不允许仅输入0的规则。需要实现的效果是：当输入框内剩余数值为0时，禁用退格键，避免出现仅留0的情况。

解决方案 #

可以通过添加键盘事件监听，结合输入框的当前值判断，来限制退格键的行为，同时调整Inputmask的配置确保输入合法性：

$('#currency').inputmask({
  regex: '^[1-9][0-9]*([,.][0-9]{1,2})?$',
  rightAlign: false,
  placeholder: '',
  min: 1,
  inputmode: 'decimal',
  casing: function (elem) {
    if(elem == ',') return '.';
    return elem;
  },
  // 初始化时清空仅0的情况
  onInit: function(elem) {
    if (elem.value.trim() === '0') {
      elem.value = '';
    }
  }
}).on('keydown', function(e) {
  const rawValue = $(this).val();
  // 提取纯数字部分，移除小数点和千分符
  const currentNum = rawValue.replace(/[,.]/g, '');
  
  // 情况1：当前值已经是0，阻止退格
  if (currentNum === '0' && e.key === 'Backspace') {
    e.preventDefault();
    return;
  }

  // 情况2：按下退格后会变成0，提前阻止
  if (e.key === 'Backspace') {
    const cursorPos = this.selectionStart;
    // 模拟删除后的数字值
    const afterDelete = currentNum.slice(0, cursorPos - 1) + currentNum.slice(cursorPos);
    if (afterDelete === '0') {
      e.preventDefault();
    }
  }
});

核心逻辑说明 #

• 退格行为拦截：监听键盘退格事件，分两种情况阻止操作：当前值已是0时，或删除后会变成0时。
• 初始化校验：通过onInit钩子确保输入框初始化状态不会出现仅0的情况。
• 纯数字提取：处理时移除输入值里的小数点、千分符，只判断数字部分，避免格式字符干扰判断。

这样既能维持原有的“不能以0开头”规则，又能防止用户通过退格操作让输入框仅剩0，同时不影响正常的数字输入和删除操作。

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