HTML5关于 contenteditable 引见

HTML5已从一个新的名词变成了我们在项目中经经常使用到的东西了,本日我们就来剖析一番个中contenteditable 。

contenteditable是HTML5的一个新的特征,有能够你也相识过一些,然则由于你没在项目中碰到过,只知道contenteditable="true"能够触发可编辑,关于如安在项目中的运用?会涌现什么题目呢?这些题目就是我们本日要说的。

先说说我碰到的。在一个项目中有个多行文本的输入,觉得textarea非常难以掌握,所以尝试运用contenteditable=”true”来模拟了一下。然则题目迥殊的严峻,他们的编辑内容居然有css款式,每次都邑发出去一些代码。然后就是复现题目,发明他们内容都是复制出来,然后他们经常使用的编辑器复制出来的内容,会带有css的表现为style标签。如许下来是不是是觉得没有办法?然后紧要切换回textarea?一般这个事变都是如许终局的,然则我们的故事不能如许终局。

contenteditable="plaintext-only" 从单词上看来是纯文本,那末我们测试一下 http://jsrun.net/hcYKp

是不是是迥殊的奇异呢?别急,css实在也是能够掌握是不是能够编辑-webkit-user-modify: read-write-plaintext-only,那末我们测试一下 http://jsrun.net/hcYKp

固然这么酷的东西,兼容还不是很好,测试最好是在chrome内里举行

    原文作者:linong
    原文地址: https://segmentfault.com/a/1190000010251116
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞