輸入欄插入符號的位置設置不正確

Question

我在下面將這個指令用於<input type="text>字段

myApp.directive('onlyDecimal', function () 
{
    return {
      require: '?ngModel',
      link: function(scope, element, attrs, ngModelCtrl) 
      {
            if(!ngModelCtrl) 
            {
                return; 
            }

            ngModelCtrl.$parsers.push(function(val) 
            {
                if (angular.isUndefined(val)) 
                {
                    var val = "";
                }

                var clean = "";

                if(val !== null)
                {
                    clean = val.replace(/[^0-9\.]/g, "");
                }

                var start   = element[0].selectionStart;
                var end     = element[0].selectionEnd + clean.length - val.length;

                var negativeCheck   = clean.split("-");
                var decimalCheck    = clean.split(".");

                if(!angular.isUndefined(negativeCheck[1])) 
                {
                    negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length);
                    clean = negativeCheck[0] + '-' + negativeCheck[1];

                    if(negativeCheck[0].length > 0) 
                    {
                        clean = negativeCheck[0];
                    }
                }

                if(!angular.isUndefined(decimalCheck[1])) 
                {
                    decimalCheck[1] = decimalCheck[1].slice(0,2);
                    clean           = decimalCheck[0] + "." + decimalCheck[1];
                }

                if (val !== clean) 
                {
                    ngModelCtrl.$setViewValue(clean);
                    ngModelCtrl.$render();
                }

                element[0].setSelectionRange(start, end);

                return clean;
            });

            element.bind("keypress", function(event) 
            {
                if(event.keyCode === 32) 
                {
                    event.preventDefault();
                }
            });

            var decimalCount = 2;
            var decimalPoint = ".";

            ngModelCtrl.$render = function() 
            {
                if (ngModelCtrl.$modelValue != null && ngModelCtrl.$modelValue >= 0) 
                {
                    if (typeof decimalCount === "number") 
                    {
                        element.val(ngModelCtrl.$modelValue.toFixed(decimalCount).toString().replace(".", ","));
                    } 
                    else 
                    {
                        element.val(ngModelCtrl.$modelValue.toString().replace(".", ","));
                    }
                }
            }

            element.on("change", function(e) 
            {
                var floatValue = parseFloat(element.val().replace(",", "."));

                if (!isNaN(floatValue) && typeof decimalCount === "number") 
                {
                    if (decimalCount === 0) 
                    {
                        element.val(parseInt(floatValue));
                    } 
                    else 
                    {
                        var strValue = floatValue.toFixed(decimalCount);
                        element.val(strValue.replace(".", decimalPoint));
                    }
                }
            });
        }
    };
});

該指令的目的是在字段中僅允許數字和1個小數。

假設我有一個50.00的值，然后將插入號設置在位置0之前，然后輸入密鑰b的無效值。 在設置選擇范圍之前，我先設置了console.log，然后得到了這些值：

START: 0 END: 1
START: 0 END: 0

它運行兩次，似乎仍將插入號移動到下一個位置。

Answer 1

您的代碼中至少有兩個問題會導致出現問題的行為：

1. 在ngModelCtrl.$render ，您正在檢查decimalCount的類型，以確定$modelValue是數字還是字符串。 一旦開始鍵入， ngModelCtrl.$modelValue就會變成一個字符串，但是您的邏輯仍然嘗試在其上調用.toFixed() ，從而導致render引發異常，並阻止解析器調用setSelectionRange 。

2. 格式化程序中未使用將逗號替換為小數的邏輯。 帶有逗號的值將輸入，而創建clean的正則表達式將刪除它，因為它期望使用小數。 解決此問題后，還必須最后修復val和clean之間的比較，以將小數交換回clean逗號。

總體而言，我將提出以下建議：

1. 將if (typeof decimalCount === "number")交換為if (typeof ngModelCtrl.$modelValue === "number")
2. 在生成clean之前，用小數替換所有逗號
3. 更換用逗號所有小數clean比較回原來的前val 。