当前位置: 首页 > Web前端 > HTML

HTML5简介contenteditable

时间:2023-04-02 18:14:48 HTML

HTML5已经从一个新名词变成了我们在项目中经常使用的名词。今天我们就来分析contenteditable。contenteditable是HTML5的一个新特性,大家可能知道一些,但是因为在项目中没有遇到过,所以只知道contenteditable="true"可以触发editable,如何在项目中应用呢?会出什么问题?这些问题就是我们今天要聊的。先说一下我遇到的吧。项目中存在多行文本输入。感觉textarea极难控制,所以尝试用contenteditable="true"来模拟。但是问题特别严重。他们编辑的内容其实是有css样式的,每次都发一些代码。然后就是重现问题,发现复制了他们的内容,然后用他们常用的编辑器复制的内容会显示为带有css的style标签。是不是感觉没有出路了?然后紧急切换回textarea?通常这件事是这样结束的,但我们的故事不能这样结束。contenteditable="plaintext-only"从word看好像是纯文本,那我们来测试下http://jsrun.net/hcYKp是不是特别神奇?不用担心,css其实可以控制是否可以编辑-webkit-user-modify:read-write-plaintext-only,那我们来测试一下http://jsrun.net/hcYKp当然这么爽的东西,兼容性是不太好,测试最好用chrome进行