フォーム検証でのInternet Explorerのngパターンと入力タイプ "number"

Question

私たちが構築しているWebアプリケーションでは、Internet Explorerでのみ発生する奇妙なバグを発見しました。

このplunkerの入力検証は、IEを除くすべてのブラウザで正常に動作します（IE10 +をサポートする必要があります）。ほとんどのブラウザでは、ユーザーが許可された文字だけを入力できるようにするため、数字を必要とする入力ではtype="number"を使用します。 ng-pattern="/^\d+$/"を使用して、許可される型の型に対してさらに検証を加えます。また、入力型がサポートされていないため、IEで唯一の検証が行われます。

問題は、入力確認が入力の最初の文字（たとえば「abb45」）として文字を入力する場合を除いて、入力の検証がほぼ正常に機能することです。それは無効な入力だとは思わない！別のSOスレッドでは、入力にrequiredを入れると適切に検証が行われることがわかりましたが、私たちの場合、この特定のフィールドは必須ではありません。さらに、フィールドが無効とマークされていても、検証メッセージは表示されません（この場合、検証エラーがどこから来るかわかりません）。

type="number"を削除することは回避策です（これはIEの問題を解決します）。しかし、この変更を行う前に、他のブラウザの数値入力の「滑らかさ」を損なう可能性がある別の解決策を見つけようとします。

注：jQueryは使用していません（jQuery liteでは角があるので、それは依存性があります）。

Answer 1

はいIEにはtype = "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で が

Ex: <input number-only />