代码之家  ›  专栏  ›  技术社区  ›  Alex Arvanitidis

Ionic contenteditable keyup,keydown事件无法正常工作(keyCode 229)

  •  1
  • Alex Arvanitidis  · 技术社区  · 6 年前

    我有以下部门:

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

    onKeyUp事件始终返回事件.密钥代码===229,相同于事件。哪个. 有没有办法让我在android设备上按正确的键码?

    1 回复  |  直到 6 年前
        1
  •  0
  •   Lia    6 年前

    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 .