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种不同的方法，都有缺陷：首先是抓住keyup事件：

Html：

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

打字稿：

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, '');
  }
}

我不喜欢这个因为代码，因为当按下键时，它可以在框中看到然后消失。

第二种方法是捕捉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

<强>更新：

有一种更简单的方法。使用你原来使用的，keyup事件：

<强> HTML ：

\n

<强>打字稿：

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

DEMO

可以通过（输入）事件处理输入，其中使用正则表达式删除任何非数字的内容。但是这种方法需要双向绑定机制。例如：

<强> HTML ：

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

<强>打字稿：

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

DEMO

Answer 2

最好使用自定义directive

以下步骤应该可以帮助您解决问题：

生成一个新的自定义指令： ng generate directive numberInput

然后在生成的指令类中添加以下内容：

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appnumberInput]'
})
export class NumberInputDirective {

  constructor(private el: ElementRef) { }

  @Input() digitOnly: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+V
        (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
      }

   @HostListener('paste', ['$event'])
   onPaste(event: ClipboardEvent) {
  event.preventDefault();
  const pastedInput: string = event.clipboardData
    .getData('text/plain')
    .replace(/\D/g, ''); // get a digit-only string
  document.execCommand('insertText', false, pastedInput);
}

@HostListener('drop', ['$event'])
onDrop(event: DragEvent) {
  event.preventDefault();
  const textData = event.dataTransfer
    .getData('text').replace(/\D/g, '');
  this.inputElement.focus();
  document.execCommand('insertText', false, textData);
}

}
  }

然后在模板中添加：

<input type="text" name="pin" id="pin" placeholder="000" maxlength="4" inputmode="numeric" pattern="[0-9]*" digitOnly>

在Angular 2/4中为手机制作一个4位数的引脚？

2 个答案: