contentEditable ="true":文本出现在输入光标的前面 [英] contentEditable="true": Text appearing infront of input cursor

问题描述

我正在使用角度.

我的代码:

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

我正在尝试建立一个可收回的网站.上面的组件在网络版本中效果很好，即使我使用google chrome在网络上测试了不同尺寸的组件也是如此.当我尝试使用野生动物园浏览器在移动设备中使用表格时，问题就来了.输入光标不会移动，文本会出现在其前面.文字向后显示.

I am trying to build a resposive website. The component above works well in the web version, even when I test it on the web for different sizes, using google chrome. The problem comes when I try to use the form in a mobile device, using safari browser. The Input cursor does not move, text appears in front of it. text appears backwards.

例如，如果我键入 Hello world.，它将显示为 .dlrow olleH .光标停留在最左边.

For example if I type Hello world. it appears as .dlrow olleH. The cursor stays at the far left.

如果删除 model = $ event.target.textContent ，即使在移动浏览器上，它也能按预期工作.有没有一种方法可以使它正常运行而不必删除这段代码?

If I remove model=$event.target.textContent it works as expected even on the mobile browsers. Is there a way to make it work normally without having to remove this piece of code?

推荐答案

我找到了解决问题的方法.

I have found a solution to my problem.

有问题的旧代码:

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);
  }

打字稿文件中还有更多代码，可让该组件用作反应形式的形式输入.以下是打字稿文件的完整代码.

There is more code in the typescript file that allows for the component to be used as a form input in a reactive form. Below is the full code for the typescript file.

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);
  }

}

这篇关于contentEditable ="true":文本出现在输入光标的前面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！