contentEditable = "true": текст появляется перед курсором ввода

Question

Я использую angular.

Мой код:

<div contentEditable="true" attr.placeholder="{{placeholder}}" 
    [textContent]="model"
    (input)="[model=$event.target.textContent,inputed($event)]">
</div>

Я пытаюсь создать ответный веб-сайт. Вышеупомянутый компонент хорошо работает в веб-версии, даже когда я тестирую его в Интернете для разных размеров с помощью google chrome. Проблема возникает, когда я пытаюсь использовать форму на мобильном устройстве с помощью браузера Safari. Курсор ввода не перемещается, перед ним появляется текст. текст отображается в обратном направлении.

Например, если я набираю Hello world. , он отображается как .dlrow olleH . Курсор остается в крайнем левом углу.

Если я удалю model=$event.target.textContent, он будет работать должным образом даже в мобильных браузерах. Есть ли способ заставить его работать нормально, не удаляя этот фрагмент кода?

Answer 1

Я нашел решение своей проблемы.

Старая проблема c код:

HTML:

<div contentEditable="true" attr.placeholder="{{placeholder}}" 
    [textContent]="model"
    (input)="inputed($event)">
</div>

Типичный файл:

@Input() model = '';

inputed(event){
    this.model = event.target.textContent;
    this.propagateChange(this.model.trim());
}

Новый код, решение

HTML:

<div contenteditable="true" attr.placeholder="{{placeholder}}" 
    [textContent]="model"
    (input)="inputed($event)" >
</div>

Типографский файл

@Input() model = '';

inputed(event){
    this.propagateChange(event.target.textContent);
  }

В машинописном файле есть еще код, который позволяет использовать компонент как ввод формы в реактивной форме. Ниже приведен полный код файла машинописного текста.

import { Component, OnInit, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'custom-textarea',
  templateUrl: './custom-textarea.component.html',
  styleUrls: ['./custom-textarea.component.scss'],
  providers: [
    { 
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: forwardRef(() => CustomTextareaComponent),
    }
  ]
})

export class CustomTextareaComponent implements ControlValueAccessor, OnInit {

  @Input() placeholder:string = "";

  propagateChange = (_: any) => {};

  writeValue(obj: any): void {
    if (obj !== undefined) {
      this.model = obj;
    }
  }
  registerOnChange(fn: any): void {
    this.propagateChange = fn;
  }
  registerOnTouched(fn: any): void {
    // We don’t want to do anything at this event,
    // so we can implement the interface with an empty function.
  }
  setDisabledState?(isDisabled: boolean): void {
    // We don’t want to do anything at this event,
    // so we can implement the interface with an empty function.
  }

  constructor() { }

  ngOnInit() { }

  @Input() model = '';

  inputed(event){
    this.propagateChange(event.target.textContent);
  }

}