Angular JS实现文本框按下Enter时为数字添加千分位逗号

嘿，这个需求用AngularJS指令实现非常合适，我之前做类似功能的时候就是这么搞的，给你分享具体的实现方案：

核心思路 #

我们需要创建一个属性型指令，监听输入框的keydown事件，当用户按下Enter键时，取出输入框的数字内容，用正则表达式添加千分位分隔符，再把格式化后的值回写到输入框中，同时更新对应的ngModel。

完整代码实现 #

angular.module('yourAppName').directive('formatNumberOnEnter', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      // 监听键盘按下事件
      element.on('keydown', function(e) {
        // 判断是否按下Enter键（keyCode=13）
        if (e.keyCode === 13) {
          // 阻止默认行为，避免表单提交或页面跳转
          e.preventDefault();
          
          // 获取当前输入值
          let inputValue = ngModel.$viewValue;
          if (!inputValue) return;
          
          // 过滤非数字字符（可选，根据需求调整）
          const cleanNumber = inputValue.replace(/[^0-9.]/g, '');
          if (isNaN(parseFloat(cleanNumber))) return;
          
          // 千分位格式化处理
          const formattedNumber = cleanNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
          
          // 更新ngModel的值，触发视图渲染
          scope.$apply(function() {
            ngModel.$setViewValue(formattedNumber);
            ngModel.$render();
          });
        }
      });
    }
  };
});

代码细节解释 #

• restrict: 'A'：指定指令作为属性使用，这样可以直接加到输入标签上
• require: 'ngModel'：依赖ngModel控制器，方便我们获取和更新输入框的绑定值
• keydown事件监听：实时捕获键盘动作，只对Enter键做出响应
• 非数字过滤：replace(/[^0-9.]/g, '')可以过滤掉输入中的非数字和非小数点字符，确保我们处理的是有效数字（如果不需要过滤可以删除这一步）
• 千分位正则：/\B(?=(\d{3})+(?!\d))/g是经典的千分位匹配正则，会在每三个数字前添加逗号，同时不会破坏小数部分的格式
• scope.$apply：因为我们在DOM事件回调中更新ngModel，需要手动触发Angular的脏检查，确保视图同步更新

使用方式 #

在你的输入框上添加这个指令即可：

<input type="text" ng-model="myNumber" format-number-on-enter placeholder="输入数字后按Enter">

测试效果 #

• 输入1000000按下Enter，输入框会显示1,000,000
• 输入1234567.89按下Enter，会显示1,234,567.89
• 如果输入非数字内容（比如abc123），过滤后会处理成123并格式化为123（如果不需要过滤可以去掉对应代码，保持原输入）

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