Ионная contenteditable keyup, события keydown не работают правильно (keyCode 229) - PullRequest
Новая
       37

Ионная contenteditable keyup, события keydown не работают правильно (keyCode 229)

0 голосов
/ 07 января 2019

У меня есть следующий div: 

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

Событие ввода не дает мне никакой информации

Событие onKeyUp всегда возвращает event.keyCode === 229, то же самое для event.which. Есть ли в любом случае, я могу получить правильный код клавиши на устройстве Android?

1 Ответ

0 голосов
/ 07 января 2019

вы можете написать 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: 

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

DEMO .

...