Question

我有以下div：

<div
     contenteditable="true"
    (input)="onInput($event)"
    (keyup)="onKeyUp($event)"
>
</div>

输入事件没有提供任何信息

onKeyUp事件始终返回event.keyCode === 229，与event.which相同。无论如何，我可以在Android设备上按正确的keyCode吗？

Answer 1

you can write a content-editable-form.directive like below, to trigger the events:

import {
  Directive,
  ElementRef,
  Renderer2,
  HostListener,
  forwardRef,
  Input,
  OnInit,
  HostBinding
} from '@angular/core';

import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  selector: '[contenteditable]',
  providers:
  [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ContentEditableFormDirective), multi: true }
  ]
})
export class ContentEditableFormDirective implements ControlValueAccessor {
  @HostBinding('attr.contenteditable') enabled = true;

  private onChange: (value: string) => void;
  private onTouched: () => void;
  private removeDisabledState: () => void;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

  @HostListener('input') onInput(): void {
    this.onChange(this.elementRef.nativeElement.innerText);
  }

  @HostListener('blur') onBlur(): void {
    this.onTouched();
  }

  writeValue(value: string): void {
    this.renderer.setProperty(this.elementRef.nativeElement, 'innerText', value || '');
  }

  registerOnChange(onChange: (value: string) => void): void {
    this.onChange = onChange;
  }

  registerOnTouched(onTouched: () => void): void {
    this.onTouched = onTouched;
  }

  setDisabledState(disabled: boolean): void {
    this.enabled = !disabled;
  }
}

html:

<label><input type="checkbox" [(ngModel)]="enabled"> Enabled</label>
<div contenteditable="true" [(ngModel)]="text" [disabled]="!enabled" #control="ngModel"></div>
<pre [innerHTML]="text"></pre>

DEMO.

离子内容可编辑的键盘输入，键盘按下事件无法正常工作（keyCode 229）

1 个答案: