如何实现字母数字输入框的整数数量限制及多余整数截断？

我来帮你搞定这个问题！你的需求是给输入框加上三个限制：禁止特定特殊字符、最大长度60，以及字符串中数字总位数不超过10，现在卡在如何从末尾删除多余的数字对吧？我来一步步给你解决。

需求回顾 #

• 禁止输入的特殊符号：~!@#$%^&*()_+={}[]|;"',<>?`
• 输入内容最大长度为60
• 字符串中所有数字的总位数不能超过10
• 示例：输入INV-123-RT-123456789-TR-123，处理后应输出INV-123-RT-1234567-TR-

修改后的完整代码 #

$('.isInvoiceNumber').on("input", function(e) {
  var pos = this.selectionStart;
  var originalVal = $(this).val();
  
  // 1. 过滤禁止的特殊字符，合并连续的点（保留单个点）
  var str = originalVal.replace(/[\~\`\!\@\#\$\%\^\&\*\(\)_\+\=\{\}\[\]\|\\\;\"\'\,\<\>\?]/g, '').replace(/\.{2,}/g, '.');
  
  // 2. 限制输入内容最大长度为60
  if (str.length > 60) {
    str = str.substring(0, 60);
  }
  
  // 3. 处理数字总位数不超过10的逻辑
  var totalDigits = str.replace(/[^0-9]/g,"").length;
  var excessDigits = totalDigits - 10;
  
  if (excessDigits > 0) {
    // 将字符串转为数组，方便从末尾逐个删除数字
    let strArray = str.split('');
    // 从字符串末尾往前遍历，移除多余的数字
    for (let i = strArray.length - 1; i >= 0 && excessDigits > 0; i--) {
      // 判断当前字符是否为数字
      if (!isNaN(parseInt(strArray[i]))) {
        strArray.splice(i, 1);
        excessDigits--;
      }
    }
    str = strArray.join('');
  }
  
  // 计算光标位置偏移量，避免输入时光标错位
  var lengthDifference = originalVal.length - str.length;
  $(this).val(str);
  this.selectionEnd = Math.max(0, pos - lengthDifference);
});

代码解释 #

1. 特殊字符过滤：和你原代码逻辑一致，用正则移除所有禁止的特殊符号，同时合并连续的点为单个点。
2. 最大长度限制：新增了长度判断，超过60就截断到前60个字符，满足需求。
3. 数字位数控制：
   • 先计算当前字符串中所有数字的总位数totalDigits
   • 算出需要移除的多余数字个数excessDigits
   • 把字符串转成数组，从末尾往前遍历，每遇到一个数字就删除它，直到多余的数字都被移除（excessDigits减到0），这样就能保证从末尾开始删数字，完全符合你示例中的要求。
4. 光标位置调整：计算原始值和处理后值的长度差，调整光标位置，避免用户输入时光标突然跳到开头，提升体验。

验证示例 #

当输入INV-123-RT-123456789-TR-123时：

• 数字总位数是3+9+3=15，需要移除15-10=5个数字
• 从末尾开始删：先删掉最后的123（3个数字），再删掉123456789的最后两位9和8（2个数字），最终得到INV-123-RT-1234567-TR-，和示例完全匹配。

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