Question

我正在使用freeze_support()来获取数据用户在输入字段上键入的信息。

每次用户在键盘上打字时，此功能运行良好。但是，当用户在输入字段中粘贴值时，此功能无法运行。

如何解决此问题？

我需要同时使用（输入数字和粘贴数字，我需要运行此功能）

HTML

(keypress)="keyPress($event)"

Ts代码

   <ion-input type="Number" (keypress)="keyPress($event)"  placeholder="Phone Number" pattern="[0-9]*" name="phonenumber" required [(ngModel)]="phonenumber"></ion-input>

Answer 1

（keypress）功能在您按下键盘时起作用，这就是为什么在粘贴数字时此功能不起作用的原因。别担心，Angular具有可以与粘贴(paste)

一起使用的功能

在您的html输入字段中只需添加(paste)="keyPress($event)"，不要删除(keypress)="keyPress($event)"函数。

当用户键入数字时，将运行按键功能；当用户粘贴数字时，将运行粘贴功能。

<ion-input type="Number" (keypress)="keyPress($event)"  (paste)="keyPress($event)" placeholder="Phone Number" pattern="[0-9]*" name="phonenumber" required [(ngModel)]="phonenumber"></ion-input>

Answer 2

请使用.scrollView来使用粘贴功能

Answer 3

粘贴是不同的事件，可以使用：

(paste)="onPaste($event)"

和.ts中的

onPaste(event) {
  console.log(event);
}

或者您可以使用@HostListener：

@HostListener('paste', ['$event'])
onPaste(event): void {
  console.log(event);
}

Answer 4

这是工作示例：

<ion-input type="Number" (paste)="onPaste($event)">

和您的ts中：

    onPaste(event: ClipboardEvent) {
        event.preventDefault();
        let clipboardData = event.clipboardData || (window as any).clipboardData;
        let pastedText = clipboardData.getData('text');
        document.execCommand("insertHTML", false, pastedText);
        console.log(pastedText);
    }

角度上的按键功能不起作用？

4 个答案: