AngularJS实现文本框输入时限制最多4位小数的实时校验

我之前处理过完全一样的需求，用AngularJS自定义指令是最直接且可靠的方案，能在用户输入过程中实时生效，不需要等失焦才校验。下面是具体实现步骤：

1. 自定义限制小数位数的指令 #

在你的AngularJS模块中添加这个自定义指令，它会监听输入事件，实时处理输入内容：

angular.module('yourAppModule')
.directive('limitDecimalPlaces', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // 获取允许的小数位数，默认4位
      var decimalPlaces = parseInt(attrs.limitDecimalPlaces) || 4;

      // 监听输入事件（实时触发）
      element.on('input keyup', function() {
        var inputValue = element.val();
        
        // 处理输入：只保留数字和一个小数点
        var cleanedValue = inputValue.replace(/[^0-9.]/g, '');
        cleanedValue = cleanedValue.replace(/(\..*)\./g, '$1'); // 去掉多余的小数点

        // 处理小数部分长度
        if (cleanedValue.indexOf('.') !== -1) {
          var parts = cleanedValue.split('.');
          if (parts[1].length > decimalPlaces) {
            // 截断小数部分到指定长度
            cleanedValue = parts[0] + '.' + parts[1].substring(0, decimalPlaces);
          }
        }

        // 只有当值变化时才更新，避免循环触发
        if (cleanedValue !== ngModelCtrl.$viewValue) {
          ngModelCtrl.$setViewValue(cleanedValue);
          ngModelCtrl.$render();
        }
      });
    }
  };
});

2. 在输入框上应用指令 #

把自定义指令加到你的输入框上，指定允许的小数位数（这里是4位）：

<input type="text" class="txt" id="txtValue" ng-model="serviceParam.Value" limit-decimal-places="4">

关键细节说明 #

• 实时触发：通过监听input和keyup事件，用户每输入一个字符都会立即处理，不需要等失焦。
• 输入清洗：先过滤掉非数字和多余的小数点，避免用户输入无效字符。
• 小数截断：当小数部分超过4位时，自动截断到4位，保证输入符合要求。
• ngModel同步：使用$setViewValue和$render()确保视图和模型的值保持同步，不破坏双向绑定。

如果你需要处理更细节的场景（比如开头直接输入小数点时自动补0），可以在输入清洗环节加个判断：

if (cleanedValue.startsWith('.')) {
  cleanedValue = '0' + cleanedValue;
}

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