Angular中检测Ctrl+V粘贴后如何获取输入框的值？

你的问题出在事件触发时机上：keydown事件在按键按下时立刻执行，此时粘贴操作还没完成，输入框的内容还没更新，Angular的ngModel也还没同步最新值，所以console.log(this.value)输出的是旧值（或空值）。

以下是几种可行的解决方案：

方案1：使用输入框的paste事件 #

paste事件会在粘贴操作完成后触发，能直接获取到更新后的输入框值：

<input [(ngModel)]="value" (paste)="onPaste($event)">

onPaste(event: ClipboardEvent) {
  // 用0延迟的setTimeout确保ngModel完成同步
  setTimeout(() => {
    console.log(this.value);
  }, 0);

  // 也可以直接从剪贴板获取粘贴内容（如果不需要输入框最终处理后的值）
  // const pastedContent = event.clipboardData?.getData('text');
  // console.log(pastedContent);
}

方案2：在keydown事件中延迟获取值 #

如果坚持使用快捷键监听，把获取值的操作放到下一个事件循环，等待粘贴完成：

@HostListener('window:keydown',['$event'])
keyPress($event: KeyboardEvent) {
    if(($event.ctrlKey || $event.metaKey) && $event.keyCode == 86){
        // 延迟到粘贴操作完成后再获取值
        setTimeout(() => {
            console.log(this.value);
        }, 0);
    }
}

方案3：监听input事件 #

input事件会在输入框内容发生任何变化时触发（包括粘贴、手动输入等），适用性更广：

<input [(ngModel)]="value" (input)="onInput($event)">

onInput(event: Event) {
  // 可以直接通过DOM元素获取值
  const input = event.target as HTMLInputElement;
  console.log(input.value);
  
  // 或者直接访问绑定的ngModel变量
  console.log(this.value);
}

内容的提问来源于stack exchange，提问作者Anthony Cuartero