表單驗證中的Internet Explorer，ng-pattern和輸入類型「number」

Question

在我們正在構建的Web應用程序中，我們遇到了一些只發生在Internet Explorer中的奇怪錯誤。

在這個plunker中看到的輸入驗證在除IE（我們必須支持IE10 +）之外的所有瀏覽器中都能正常工作。我們在需要數字的輸入中使用type="number"，因爲它在大多數瀏覽器中很容易確保用戶只輸入允許的字符。我們還使用ng-pattern="/^\d+$/"在允許的數字類型上添加更多的驗證，並且它是我們在IE中唯一的驗證，因爲不支持輸入類型。

問題是：除非我們輸入字母作爲輸入的第一個字符（例如「abb45」），否則輸入驗證幾乎可以按預期工作。它甚至不認爲這是一個無效的輸入！我在另一個SO線程中看到，在輸入上放置required會正確觸發驗證，但在我們的情況下，這個特定字段根本不是強制性的。此外，即使該字段標記爲無效，驗證消息也不會顯示（我不確定驗證錯誤來自哪裏）。

刪除type="number"是一種解決方法（它可以解決IE中的問題），但是我們寧願在進行此更改之前嘗試找到另一個解決方案，以打破其他瀏覽器中數字輸入的「平滑性」。

注意：我們不使用jQuery（只有jQuery lite，因爲angular有它作爲依賴）。

Answer 1

是IE遇到類型=「number」的問題。我會鼓勵你也用指令只接受數字

angular.module('moduleName').directive('numbersOnly', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element, attr, ngModelCtrl) { 
      function fromUser(text) { 
       if (text) { 
        var transformedInput = text.replace(/[^-0-9\.]/g, ''); 

        if (transformedInput !== text) { 
         ngModelCtrl.$setViewValue(transformedInput); 
         ngModelCtrl.$render(); 
        } 
        return transformedInput; 
       } 
       return undefined; 
      }    
      ngModelCtrl.$parsers.push(fromUser); 
     } 
    }; 
}); 

， 在HTML number-only屬性添加到

Ex: <input number-only />