HTML5关于contenteditable介绍

简介: HTML5已经从一个新的名词变成了我们在项目中经常用到的东西了,今天我们就来分析一番其中contenteditable 。

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里面进行

相关文章
|
7天前
|
JSON 前端开发 JavaScript
使用html,css,js 实现一个龙年春节祝福卡片效果
使用html,css,js 实现一个龙年春节祝福卡片效果
26 4
|
1月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
79 0
|
4天前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
4天前
|
前端开发
HTML+CSS基础知识(4)简单的广告界面
这篇文章通过代码示例演示了如何使用CSS样式来美化网页布局,包括清除默认样式、设置页面字体、调整标题和内容的样式,以及为超链接添加悬停效果。
HTML+CSS基础知识(4)简单的广告界面
|
5天前
|
前端开发 数据安全/隐私保护
HTML&CSS
【8月更文挑战第14天】
15 1
HTML&CSS
|
8天前
|
存储 开发框架 JavaScript
Threejs中三维物体和HTML的爱恨情仇:CSS2DRenderer
【8月更文挑战第7天】Threejs中三维物体和HTML的爱恨情仇:CSS2DRenderer
22 4
Threejs中三维物体和HTML的爱恨情仇:CSS2DRenderer
|
4天前
|
前端开发
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
这篇文章介绍了HTML和CSS中的三种定位方式:相对定位、绝对定位和固定定位,并通过代码示例展示了它们如何影响元素在页面上的布局和位置。
HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
|
4天前
|
前端开发
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
该博客文章详细介绍了HTML和CSS的基础知识,包括CSS样式的应用方式、语法规则、选择器的使用、盒子模型、内边距、外边距、元素的显示类型以及overflow属性处理溢出内容的方法,并通过代码示例和测试结果截图展示了这些知识点在网页设计中的应用。
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
|
10天前
|
前端开发
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
|
7天前
|
JavaScript 前端开发
使用js,html,css实现歌词滚动的效果
使用js,html,css实现歌词滚动的效果
15 0