时间戳

首页 > 解决方案 > 尝试使用角度可编辑 div 中的文本内容更新变量时，可编辑 div 上的奇怪行为。有什么解释吗？

html - 尝试使用角度可编辑 div 中的文本内容更新变量时，可编辑 div 上的奇怪行为。有什么解释吗？

问题描述

我正在尝试创建一个文本编辑器，并使用可编辑的 div 以角度创建了一个自定义元素。

在某些情况下，我必须为 div 的内容设置一些初始值，并在某些情况下捕获 div 中的类型数据。

但是根据设置的初始值，我会为同一个 div 获得三种不同的行为。

我希望 div 的行为类似于常规输入字段，但我不想使用实际的 Input 元素。

我在Stackblitz 演示中做了一个关于该问题的工作示例。

组件代码如下。

元素组件的模板 HTML： 

<div contentEditable='true' (input)="update($event)">{{value}}</div>
<p>{{value}}</p>

组件元素的打字稿文件： 

import { Component, Input } from '@angular/core';

@Component({
  selector: 'element',
  template: `<div contentEditable='true' (input)="update($event)">{{value}}</div>
    <p>{{value}}</p>
`,
  styleUrls: ['./element.component.css']
})
export class ElementComponent {
  @Input() value: string;

  update(event) {
    this.value = event.target.innerText;
  }
}

CSS： 

div{
  background: black;
  margin: auto;
  color:white;
  font-size: 2em;
}

这三种不同的行为是：

  1. 如果您没有为值输入字段设置初始值，那么在您输入 div 时，文本会不断地附加到自身。
  2. 如果您为值输入字段提供初始值，则在您键入 div 时，光标会将其重置为初始位置。
  3. 无论您提供初始文本还是在空 div 中输入内容，如果您从 div 中选择所有文本并点击删除或退格并开始输入。它表现为一个普通的文本框。

我期待第三种行为，例如在您清除元素的行为方式之后。

标签： htmlcssangularcontenteditable

解决方案

可能的解释：您尚未声明绑定值。

解决方法：添加：

[textContent]="model"声明模板时div

  model;
  ngOnInit(){
    this.model = this.value;
  }

内ElementComponent出口类

Stackblitz 演示

相关： 如何在 angular2 中的 div 的 contenteditable 上使用 [(ngModel)]？, https://github.com/KostyaTretyak/ng-stack/tree/master/projects/contenteditable

推荐阅读