如何为number类型input标签设置15位整数+4位小数输入限制

我懂你这个痛点——原生的maxlength对type="number"的输入框完全没用，而且你需要严格控制整数15位、小数4位的格式，之前试的方案都不太行对吧？下面给你几个AngularJS环境下切实可行的解决办法：

方案一：自定义AngularJS指令（推荐） #

自定义指令是处理这类自定义输入限制最灵活的方式，它能实时过滤输入内容，确保符合格式要求。

1. 编写指令代码 #

在你的AngularJS模块中添加这个指令：

angular.module('yourAppModule').directive('numberWithLimit', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // 监听模型解析过程，过滤输入值
      ngModelCtrl.$parsers.push(function(inputValue) {
        if (!inputValue) return '';
        
        // 第一步：移除所有非数字和逗号的字符（适配逗号作为小数分隔符）
        let cleaned = inputValue.replace(/[^0-9,]/g, '');
        
        // 第二步：处理多个逗号的情况，只保留第一个
        const parts = cleaned.split(',');
        if (parts.length > 2) {
          cleaned = parts[0] + ',' + parts.slice(1).join('');
        }
        
        // 第三步：截断整数和小数部分到限制长度
        const integerPart = parts[0] ? parts[0].slice(0, 15) : '';
        const decimalPart = parts[1] ? parts[1].slice(0, 4) : '';
        
        // 第四步：重新组合成符合格式的字符串
        let formatted = integerPart;
        if (decimalPart) {
          formatted += ',' + decimalPart;
        }
        
        // 如果处理后的值和原输入不同，更新视图和模型
        if (formatted !== inputValue) {
          ngModelCtrl.$setViewValue(formatted);
          ngModelCtrl.$render();
        }
        
        return formatted;
      });
    }
  };
});

2. 在HTML中使用指令 #

把原来的type="number"改成type="text"（避免原生number输入框的自动格式化干扰），然后添加自定义指令：

<div class="form-group col-md-3">
  <label class="lb">Valor total</label>
  <input type="text" ng-model="subTotalProduto" ng-keyup="calculaValorProdutos()" 
         id="idValorTotalProdutoP" class="form-control" number-with-limit />
</div>

方案二：结合ng-pattern和事件处理（快速实现） #

如果你不想写指令，可以在现有代码基础上，通过ng-pattern做格式校验，同时在calculaValorProdutos函数里添加输入过滤逻辑。

1. 修改HTML添加ng-pattern #

<div class="form-group col-md-3">
  <label class="lb">Valor total</label>
  <input type="text" ng-model="subTotalProduto" ng-keyup="calculaValorProdutos()" 
         id="idValorTotalProdutoP" class="form-control"
         ng-pattern="/^\d{0,15}(,\d{0,4})?$/" />
  <!-- 可选：添加验证错误提示 -->
  <small class="text-danger" ng-show="yourFormName.idValorTotalProdutoP.$error.pattern">
    格式错误：最多15位整数，4位小数
  </small>
</div>

2. 更新控制器中的calculaValorProdutos函数 #

$scope.calculaValorProdutos = function() {
  let value = $scope.subTotalProduto;
  if (!value) return;
  
  // 清理非法字符
  value = value.replace(/[^0-9,]/g, '');
  const parts = value.split(',');
  
  // 截断到限制长度
  let integer = parts[0]?.slice(0, 15) || '';
  let decimal = parts[1]?.slice(0, 4) || '';
  
  // 重新赋值给模型
  $scope.subTotalProduto = decimal ? `${integer},${decimal}` : integer;
  
  // 保留你原来的计算逻辑
  // ... 你的其他代码
};

关键注意事项 #

• 为什么不用type="number"？因为原生number输入框会自动处理前导零、转换小数分隔符（比如把逗号转成点），而且无法精确控制整数和小数的位数限制，用type="text"更可控。
• 如果你的项目用点号作为小数分隔符，只需要把代码中的逗号替换成点号，同时调整正则表达式即可。

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