Question

我正在使用primeNg输入控件（p-spinner，p-calendar）。不幸的是，当我通过鼠标从上下文菜单中选择粘贴选项时，[（ngModel）] =“value”绑定不会触发。即使我单击控件外，丢失的焦点也没有考虑在内。 ctrl + v键盘操作很好但鼠标/上下文菜单选项更重要。请帮忙。我目前的版本：＆＃34; primeng＆＃34;：＆＃34; ^ 4.1.3＆＃34;，

Answer 1

日历输入字段如下所示：

<input #inputfield 
       type="text" 
       [attr.id]="inputId" 
       [attr.name]="name" 
       [attr.required]="required" 
       [value]="inputFieldValue" 
       (focus)="onInputFocus($event)" 
       (keydown)="onInputKeydown($event)" 
       (click)="datepickerClick=true" 
       (blur)="onInputBlur($event)"
       [readonly]="readonlyInput" 
       (input)="onUserInput($event)" 
       [ngStyle]="inputStyle" 
       [class]="inputStyleClass" 
       [placeholder]="placeholder||''" 
       [disabled]="disabled" 
       [attr.tabindex]="tabindex"
       [ngClass]="'ui-inputtext ui-widget ui-state-default ui-corner-all'">

当您从上下文菜单(keydown)="onInputKeydown($event)"进行复制时，

会被触发：

onInputKeydown(event) {
  this.isKeydown = true;
  if(event.keyCode === 9) {
    this.overlayVisible = false;
  }
}

然后(input)="onUserInput($event)"

onUserInput(event) {
  // IE 11 Workaround for input placeholder : https://github.com/primefaces/primeng/issues/2026
  if(!this.isKeydown) {
    return;
  }
  this.isKeydown = false;

  let val = event.target.value;   
  try {
    let value = this.parseValueFromString(val);
    this.updateModel(value);
    this.updateUI();
  } 
  catch(err) {
    //invalid date
    this.updateModel(null);
  }

  this.filled = val != null && val.length;
  this.onInput.emit(event);
}

它看起来像 IE 11解决方法导致非键盘交互的其他问题（例如通过右键单击粘贴）。因此，可以在输入粘贴事件上设置this.isKeydown = true;。

导入日历和ViewChild：

import { Component, NgModule, ViewChild } from '@angular/core';
import { CalendarModule, Calendar } from 'primeng/primeng';

获取p日历参考： HTML：

<p-calendar #calendarRef [(ngModel)]="value"></p-calendar>

TS文件：

@ViewChild('calendarRef') calendarRef: Calendar;

在ngAfterViewInit hook中注册粘贴侦听器：

ngAfterViewInit() {
  this.calendarRef.inputfieldViewChild.nativeElement.onpaste = (e) {
    this.calendarRef.isKeydown = true;
  }
}

现在应该可以了，

plunker：https://plnkr.co/edit/SSI4XDxGtu1O59DJZfd4?p=preview

更新SPINNER

将微调器引用添加为@ViewChild

在微调器引用上注册onpaste侦听器

export class App implements OnAfterViewInit {
  @ViewChild('calendarRef') calendarRef: Calendar;
  @ViewChild('spinnerRef') spinnerRef: Spinner;

  value: Date;

  ngAfterViewInit() {
    this.calendarRef.inputfieldViewChild.nativeElement.onpaste = (e) {
      this.calendarRef.isKeydown = true;
    }

    this.spinnerRef.el.nativeElement.onpaste = (event) {
      setTimeout(_ => {
        this.spinnerRef.onInput(event, event.target.value);
      });
    }
  }
}

PLUNKER也已更新

参考onInput()函数：https://github.com/primefaces/primeng/blob/master/src/app/components/spinner/spinner.ts#L201

primeNg输入控件上下文菜单paste - ngModel

1 个答案: