css - contenteditable

css - contenteditable

contenteditable属性

contenteditable 属性是 HTML5 中的新属性。规定是否可编辑元素的内容。

• 让contenteditable元素只能输入纯文本

css控制法

一个div元素，要让其可编辑，contenteditable属性是最常用方法，CSS中也有属性可以让普通元素可读写。

user-modify.

支持属性值如下：

user-modify: read-only;
user-modify: read-write;
user-modify: write-only;//可以输入富文本
user-modify: read-write-plaintext-only;//只能输入纯文本

read-write和read-write-plaintext-only会让元素表现得像个文本域一样，可以focus以及输入内容

contenteditable控制法

contenteditable="plaintext-only"

"plaintext-only"可以让编辑区域只能键入纯文本

• 注意：目前仅仅是Chrome浏览器支持比较好的

demo

<template>
  <div class="app-container">
    <h1>contenteditable</h1>
    <div contenteditable="true">div div div</div>
    <p contenteditable="true">p p p</p>
  </div>
</template>