H5 contentEditable 创建可编辑区域

最新推荐文章于 2024-06-27 16:19:12 发布
最新推荐文章于 2024-06-27 16:19:12 发布
阅读量364 收藏
点赞数 1
分类专栏： 前端 文章标签： html5 js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43639981/article/details/110070122
版权
本文实现的是点击时div变为可编辑，在移除焦点后恢复不可编辑状态，以及在编辑过程中显示编辑内容的实时变化1. HTML部分-webkit-user-select: text;在有些移动端开发时经常会加入禁止选中样式，会导致可编辑区域无法编辑<div onclick="focustest();" onblur="blurtest();" onkeyup="keyuptest();" style="width: 100%;min-height: 30px;-webkit-user-select: t
摘要由CSDN通过智能技术生成

本文实现的是点击时div变为可编辑，在移除焦点后恢复不可编辑状态，以及在编辑过程中显示编辑内容的实时变化

1. HTML部分

-webkit-user-select: text;在有些移动端开发时经常会加入禁止选中样式，会导致可编辑区域无法编辑

<div onclick="focustest();" onblur="blurtest();" onkeyup="keyuptest();"
最低0.47元/天 解锁文章
RunningOnMyWay
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个？
努力是为了站在万人之中，成为别人的光
07-05 26万+
HTML5不是什么新鲜事。自初始版本（2008 年 1 月）以来，我们一直在使用它的几个功能。我再次仔细查看了 HTML5 功能列表。看看我发现了什么？到目前为止，我还没有真正使用过很多！ 在本文中，我列出了 10 个这样的HTML5功能，这些功能过去我用得不多，但现在发现它们很有用。我还创建了一个工作示例流程并托管在Netlify. 希望你也觉得它有用。让我们开始了解有关它们中的每一个的解释、代码和快速提示。 https://wanghao221.github.io/html-tips-tricks/
h5 富文本输入框_富文本输入框
weixin_34553907的博客
12-23 1890
Web聊天工具的富文本输入框最近折腾 Websocket，打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ，粘贴图片的富文本输入框其实蕴含着许多有趣的知识，于是便打算记录下来和大家分享。首先来看看 demo 效果：是不是觉得很神奇？接下来我会一步步讲解这里面的功能都是如何实现的。输入框富文本化传统的输入框都是使用 来制作的，它的优势是非常简单，但最大的缺陷却是无法展示图...
HTML5 - contenteditable 富文本编辑器
qq_25833731的博客
05-26 4563
HTML5 - contenteditable应用
HTML中编辑区域适用范围,创建可编辑区域
weixin_30737431的博客
06-19 753
键盘输入分类直接输入输入的键直接落入可输入DOM元素，为直接输入。E.g.英文输入。间接输入输入的键值不会直接落入可输入DOM元素，有一个中间态，为间接输入。E.g.中文输入。区分中英文输入因为任何输入都会触发input，而输入中文的时候才触发compositionstart和compositionend，可以以此来区分中英文输入。e.keyCode在中英文下不同的表现e.keyCode在英文模式...
如何在 HTML 中使 div 元素可编辑
qq_25153359的博客
06-05 495
如何在 HTML 中使 div 元素可编辑
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
codingWeb的博客
11-07 8659
这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等 HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素
contenteditable——html5新增的一个允许用户直接在页面中编辑文本内容的属性
最新发布
AmyGeng123的博客
06-27 827
contenteditable，html5新增的一个允许用户直接在页面中编辑文本内容的属性，以及contenteditable与input标签的比较
H5新增标签
weixin_44695311的博客
05-29 169
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。 HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是**<!DOCTYPE>**的用处。 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。 在 HTML 4.01 中，<!DOCTYP...
H5笔记
qq_36211859的博客
12-19 171
*** 固定格式 html,body{height: 100%;overflow: hidden;} //取消滚动条 html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";} a{text-decoration: none;display: block;} li{list-style: no...
设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
09-28
有些Weber可能没有用过contenteditable这个属性，如果想编辑一个DIV里面的内容，这个属性是一个非常不错的选择
利用HTML5 Contenteditable实现网页编辑器
04-16
解压密码：RJ4587 记得之前我们分享过一款jQuery轻量级网页编辑器和CSS3可视化网页编辑器 基于tinymce编辑器，都非常实用，今天我们再来分享一款利用HTML5 contenteditable属性实现的简易网页编辑器，目前我们只实现...
contenteditable:使页面可编辑的扩展
05-11
内容可编辑通过向<body>添加contenteditable属性，使任何页面都可编辑。 按图标开始编辑，完成后再按一次。 重新加载页面后，您所做的更改就消失了。 适用于 ， 和 。 根据MIT许可获得许可
编辑器中designMode和contentEditable的属性的介绍
10-30
例如，将一个`<div>`的`contentEditable`属性设置为`"true"`，那么这个`div`以及其中的所有内容都将变为可编辑： ```html <div id="tt" contentEditable="true"> ``` 若要让整个页面可编辑，可以在`<body>`标签中...
squire h5编辑器
06-21
Squire的工作原理基于contentEditable特性，这是HTML5引入的一个重要功能，允许任何DOM元素变为可编辑。通过监听DOM事件，Squire可以捕获用户的所有编辑操作，并对其进行处理，如自动格式化、防止恶意脚本注入等。...
jquery word export 导出html内容无样式或无图片问题
weixin_43639981的博客
07-21 6547
1. 首先要准备好对应的js文件 jquery文件，FileSaver，以及主要的jquery.wordexport <script type="text/javascript" src="/javascripts/common/jquery.min.js"></script> <script type="text/javascript" src="/javascripts/common/FileSaver.min.js"></script> <
移动端H5 input移动端事件汇总
weixin_43639981的博客
07-06 4019
移动端H5 input事件汇总这里汇总了Android和IOS端的input事件汇总Android 端的H5 input事件1. focus事件2. input事件3. keydown事件4. keyup事件IOS端的H5 input事件1. focus事件2. input事件3. keydown事件4. keyup事件合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创
js JSON.parse()与 split("")效率对比
weixin_43639981的博客
12-23 1333
1. 最新需要考虑存储内容时以JSON字符串的形式还是以字符串特殊间隔的形式保存，首先来对比读取解析为json对象 测试代码如下： function ceshi() { console.log("json字符串parse效率测试"); var obj = {"taitoulx":"企业(或个人或事业单位)","fapiaott":"发票抬头","shuihao":"纳税...
H5+jq 父元素绑定事件 处理子元素所有的事件(一)
weixin_43639981的博客
06-23 1014
下方以一个按压效果为例，分别绑定了touchstart、touchmove、touchend三种事件，其他的click事件也可以参照；使用e.target(获取到当前事件触发的节点)，又通过e.target.nodeName.tolowerCase()获取可对比的小写tagname，来定位不同位置产生的事件；当然，也可以更复杂一些，在对应的元素上设置不同的className或者其他属性，通过对属性的判断可以区分一些相同tagname，用于做不同的事件处理。 <!DOCTYPE html> &lt
HTML5 编辑区域属性 contenteditable 的使用与监听
06-07
<div contenteditable="true" id="editable-div">可编辑的内容 const editableDiv = document.querySelector('#editable-div'); editableDiv.addEventListener('input', () => { console.log('内容已被修改：', ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值