Question

我试图在其中粘贴某些内容后获取文本输入字段的内容。我该如何获取数据？使用$event.target.value我用于keyup事件的方法不起作用。如果您使用Ctrl + V粘贴某些内容它会因为keyup事件而生效，但如果我尝试从浏览器的上下文菜单中粘贴某些内容，则无效。

这是一个非常简单的代码示例：

@Component({
  selector: 'my-app',
  template: `<input type="text" [ngModel]="value" (paste)="pasteEvent($event)" (keyup)="keyupEvent($event)">
  <br>{{result}}`
})
export class AppComponent {
  public result: string;

  public pasteEvent($event: any) {
    this.result = $event.target.value;
    console.log('paste: '+ $event.target.value);
    console.log($event);
  }

  public keyupEvent($event: any) {
    this.result = $event.target.value;
    console.log('keyup: '+ $event.target.value);
  }
}

Answer 1

如果您只是想在用户以与编辑值相同的方式更新模型时更新模型，则可以使用

(ngModelChange)="pasteEvent($event)"

或双向绑定

[(ngModel)]="value"

如果您确实想直接处理过去的事件，那么该事件应该具有clipboardData属性：

console.log($event.clipboardData);

要获取粘贴的文字，您可以使用getData：

console.log($event.clipboardData.getData('Text'));

另见

Answer 2

对我来说，以下代码有效：

（paste）=“ onPasteHandler（$ event.clipboardData.getData（'text / plain'））”

获取（粘贴）事件后的文本输入值

2 个答案: