Ionic contenteditable keyup、keydown 事件无法正常工作（keyCode 229）答案

【问题标题】：Ionic contenteditable keyup, keydown events not working correctly (keyCode 229)Ionic contenteditable keyup、keydown 事件无法正常工作（keyCode 229）
【发布时间】：2019-01-07 21:14:04
【问题描述】：

我有以下 div：

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

输入事件没有给我任何信息

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

【问题讨论】：

我没有一个好的解决方案，但我在我的项目中使用 jquery 解决了这个问题（不推荐）。 textInput 事件回调返回的逻辑 keyCode 比 ionic 的 onInput 事件更多。希望这可以帮助。 $('#input').on('textInput', e => { var keyCode = e.originalEvent.data.charCodeAt(0); if(keyCode57){ e.preventDefault(); } });

标签： angular ionic-framework ionic2 ionic3 contenteditable

【解决方案1】：

您可以编写如下的 content-editable-form.directive 来触发事件：

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.

【讨论】：

不幸的是，即使使用指令 keyup 事件也会返回 event.which 和 event.keyCode 229 :/