2017-02-07 7 views
8

なぜか分かりませんが、時間が経ってからは何か問題があると言えます。Androidキーボードの入力リスナー(onkeypress、onkeydown)が数字のキーボードでない場合

私はそれがのみ番号(数字[0-9])と何よりもを受け入れるようにしたい、簡単な入力

<input type="number"> 

を持っています。これを達成するために、イベントのキーコードを制御するイベントリスナーを追加しました。

ほとんどすべてのプラットフォームで動作する特別なものはありません。問題はAndroidに付属しています。ここで

タイプは、=「数」

は、数字キーボードが現れます - それは素晴らしいことだ - また、いくつかの他の文字(コンマ、ドット、ハイフン...)で。あなたはこの特殊文字のいずれかを押したときの動作は奇妙です:

  • OnKeyPressイベント:絶対にを発射ない(なぜ???)
  • OnKeyDownイベント:イベントが発射され、相対的な関数が呼び出されます。問題は、ブラウザが既に文字「」(なぜ?)をタイプしているため、「イベント」の「preventDefault」機能を呼び出すことができないということです。
  • 入力イベント:イベントは発生していますが、「イベント」オブジェクトの「コード」と「どの」プロパティは未定義です。また、以前のように、ブラウザにはすでに文字「」が入力されています。

私は何が欠けていますか?

私の環境はAngularJsによってパワードされるので、私はディレクティブの内部にイベントリスナーを設定しました。しかし、jQueryで同じことをしても問題は解決しません。

"$ parsers"を使用して、私のカスタム値を不要な文字なしでプッシュすることをお勧めします。とにかくこれは動作しません入力の種類が "数字"であり、数字だけが期待されているので(Androidのブラウザが何か間違っていると言う別の方法です)

ここにはworking FiddleがありますAndroidで

おかげ

答えて

2

$parsers.unshiftでこのディレクティブについて:

app.directive('format', ['$filter', '$window', function($filter, $window) { 
    return { 
    require: '?ngModel', 
    link: function(scope, elem, attrs, ctrl) { 

     if (!ctrl) return; 

     scope.plainNumber = scope.test+''; 

     ctrl.$parsers.unshift(function(viewValue) {   

     if(!viewValue){ 
     viewValue = scope.plainNumber; 
     } 
     scope.plainNumber = viewValue.replace(/[^\d]/g, ''); 

     elem.val(scope.plainNumber); 
     return scope.plainNumber;    
     }); 
    } 
    }; 
}]); 

と使用方法:Android上でテストさ

<input type="number" ng-model="test" format /> 

Demo Fiddle


+0

完璧ではありませんが、これが最良の選択肢だと思います。 –

6

keypressイベントは、​​とkeyup、解雇されていません。 onkeydownpreventDefault()メソッドを呼び出すことができます。しかし、何を防ぐ? charCodeは常に0であり、keyCode229です。すべての入力を確認する必要があります。このような

何か:

if(!event.charCode) { 
    this.removeInvalidChar(); 
    return; 
} 

private removeInvalidChar(): void { 
    setTimeout(() => { 
     let input = this.control.control.value; 

     if (input) { 
      input.split('').forEach((char: string) => { 
       if (!this.pattern.test(char)) { 
        input = input.replace(char, ''); 
       } 
      }); 
      this.control.control.setValue(input); 
     } 
    }); 
} 
+0

「キー押しイベントは発生しません」実際にはこれが本当の問題です!なぜ解雇されないのですか? keydownイベントでは、charはすでに入力フィールドの中にあるので(あなたはそれを削除することができますが、醜い効果が得られます)、コードは正常に機能しません。 Androidのフィドルで試してみてください –

+0

これはonkeyupを使用しています...そして結果は理想的ではありません...無効な入力が置き換えられたときにちらつきが見えます。 – Zoryana

1

使用inputTypeは=「numberSignedは、」それが完璧に動作ネイティブアンドロイドでは少なくとも、0-9の間であなただけの数字を提供します。

関連する問題