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>
Lee2