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

Question

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

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 解决方法 导致 none 键盘交互（如通过右键单击粘贴）的其他问题。因此，作为变通方法，在输入粘贴事件上设置 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 挂钩中注册粘贴监听器：

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

现在应该可以了，

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

微调器更新

将微调器引用添加为 @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 输入控件上下文菜单粘贴 - ngModel

primeNg input controls context menu paste - ngModel

angular

primeng