AngularJS仅允许输入带小数位数字的指令开发问询

我帮你完善这个指令，你的现有代码在正则匹配逻辑上有点问题，咱们调整后可以实现只允许输入带小数位（最多两位）的数字，以下是完整可行的代码：

zpc.directive('onlyNumbers', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (inputValue) {
                if (inputValue === undefined) return '';
                
                // 先过滤掉所有非数字和非小数分隔符（这里用逗号）的字符
                var cleanInput = inputValue.replace(/[^0-9,]/g, ''); 
                
                // 处理多个逗号的情况：只保留第一个逗号，避免出现无效格式
                var parts = cleanInput.split(',');
                if (parts.length > 2) {
                    cleanInput = parts[0] + ',' + parts.slice(1).join('');
                }
                
                // 限制小数部分最多两位，超过则自动截断
                if (parts.length === 2 && parts[1].length > 2) {
                    cleanInput = parts[0] + ',' + parts[1].substring(0, 2);
                }
                
                // 如果输入内容被修正，同步更新视图
                if (cleanInput !== inputValue) {
                    modelCtrl.$setViewValue(cleanInput);
                    modelCtrl.$render();
                }
                
                return cleanInput;
            });
        }
    };
});

关键逻辑说明： #

• 先过滤非法字符：只保留数字和小数分隔符（逗号），确保输入内容的基础合法性。
• 处理重复分隔符：避免出现123,,45这类无效格式，仅保留第一个逗号。
• 限制小数长度：强制小数部分最多两位，超出部分自动截断，符合常见的金额、数值输入需求。
• 视图同步修正：当输入内容被调整后，立刻更新输入框显示内容，让用户直观看到修正结果。

使用方式： #

在输入框上添加指令属性即可：

<input type="text" ng-model="numberValue" only-numbers>

如果需要用点（.）作为小数分隔符，只需要把代码里的逗号替换成点即可：

var cleanInput = inputValue.replace(/[^0-9.]/g, '');
var parts = cleanInput.split('.');
if (parts.length > 2) {
    cleanInput = parts[0] + '.' + parts.slice(1).join('');
}
if (parts.length === 2 && parts[1].length > 2) {
    cleanInput = parts[0] + '.' + parts[1].substring(0, 2);
}

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