携帯電話用に4桁のピンを2/4角にしていますか？

Question

他の人は4桁のピンに対して何をしましたか？ 私はAngular 2/4で4桁のピンを作ろうとしていますが、まだ簡単に見つけられていないようです。

電話には数字だけを表示できるsoft keyboardがあります。 AndroidとiOSの両方に数キーボードを表示するための最良の方法（唯一の方法）は、以下のhtmlタグである：

<input 
    type="number" 
    pattern="[0-9]*" 
    inputmode="numeric" 
    style="-webkit-text-security: disc;"></input> 

今では私にとりわけ小数、ダッシュ、カンマを持つキーボードを提供します。私は数字だけがボックスに入れられていることを確認する必要があります。私が考えることができる最も良い方法は、キープレスイベントをキャッチし、入力時に無効な文字を削除することです。 私が試してみましたし、すべての欠陥を持っている3種類の方法があります。

HTML：：

<input 
    (keyup)="checkPin($event)" 
    type="number" 
    pattern="[0-9]*" 
    inputmode="numeric" 
    style="-webkit-text-security: disc;"></input> 

活字体： まずからkeyupイベントキャッチです

checkPin($event: KeyboardEvent) { 
    console.log($event) 
    let value = (<HTMLInputElement>event.target).value; 

    if ($event.target) { 
    if (value == "") { 
     value = value.slice(0, 0); 
    } 

    if (value.length > 4) { 
     value = value.slice(0, 4) 
    } 
    (<HTMLInputElement>event.target).value = value.replace(/\D/g, ''); 
    } 
} 

を、私は好きではないが、これは、キーが押し込まれるとボックス内に表示されるため、コードが消えるためです。

は

第2のアプローチはkeypressイベントをキャッチすることです：

HTML：

<input 
    (keypress)="keyPress($event)" 
    type="number" 
    pattern="[0-9]*" 
    inputmode="numeric" 
    style="-webkit-text-security: disc;"></input> 

タイプスクリプト

keyPress(event: any) { 
    const pattern = /[0-9]/; 
    const inputChar = String.fromCharCode(event.charCode); 
    let lIsTooLong: boolean = event.target.value.length > 3 
    if (!pattern.test(inputChar) || lIsTooLong) { 
    // invalid character, prevent input 
    event.preventDefault(); 
    } 
} 

は、これは非常にうまく動作しますが、それは、Android上では動作しません。ピリオドまたはコンマを押すと、ピリオドは入力ボックスに入力されます。

私はinputを使用してみました：

HTMLを：

<input 
    #myInput 
    [(ngModel)]="input" 
    (input)="myInput.value = format(input)" 
    type="number" 
    pattern="[0-9]*" 
    inputmode="numeric" 
    style="-webkit-text-security: disc;"></input> 

タイプのスクリプト：

format(valString) { 
    console.log(valString); 
    if (!valString) { 
    return ''; 
    } 
    let val = valString.toString(); 
    if (val.length > 4) { 
    val = val.slice(0, 4) 
    } 
    return val.replace(/\D+/g, '') 
} 

この最後の方法は有望に見えたが、二つ以上の.が実際にコードを入力したとき、フォーマット関数を呼び出して停止しました。私は、コンソールログを行なったし、値valStringだったと空の文字列が、ボックス内のテキストが123423.........

Answer 1

UPDATEた：

もっと簡単な方法があります。あなたが使用され、からkeyupイベントをもともとどのような使い方：

HTML：

<input type="number" style="border:1px solid black" (keydown)="onKeyPress($event)" > 

を活字体：

onKeyPress(event){ 
    if (!(event.keyCode >= 48 && event.keyCode <= 57)){ 
     event.preventDefault() 
    } 
} 

DEMO

---

入力はprocの可能性あなたがregexpで数値ではないものを削除するエッセードスルー（入力）イベントです。しかし、この方法は双方向結合機構を必要とする。例：

HTML：

<input type="number" [(ngModel)]="input" #myInput style="border:1px solid black" (input)="myInput.value = format(input)"> 

活字体：

format(valString) { 
    if (!valString) { 
     return ''; 
    } 
    let val = valString.toString(); 
    return val.replace(/\D+/g, ''); 
} 

DEMO