contenteditable可编辑功能,监听输入内容与回车操作

最新推荐文章于 2025-03-04 16:14:16 发布
最新推荐文章于 2025-03-04 16:14:16 发布
阅读量3.2k 收藏 10
点赞数 9
分类专栏： javascript 文章标签： vue3 光标设置 contenteditable 可编辑功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/buruyang/article/details/138175302
版权

contenteditable

在div元素上添加contenteditable="true" 可以让div变成可编辑元素

 <div class="word-block" contenteditable="true"></div>

在这里插入图片描述
同时还支持回车换行
在这里插入图片描述
回车后就会生成一个div元素
在这里插入图片描述
添加 -webkit-user-modify: read-write-plaintext-only; 属性只显示文本不会显示其他标签

禁止检查拼写

可以看到在输入单词时，会有红色波浪线，可以添加spellcheck="false" 属性禁止

<div class="word-block" contenteditable="true" spellcheck="false"></div
最低0.47元/天 解锁文章
基于layui实现的可编辑、可回车进入下一行的表格
猫晨的技术小屋
08-04 649
基于layui实现的可编辑、可回车进入下一行的表格
利用HTML5 Contenteditable实现网页编辑器
04-16
解压密码：RJ4587 记得之前我们分享过一款jQuery轻量级网页编辑器和CSS3可视化网页编辑器 基于tinymce编辑器，都非常实用，今天我们再来分享一款利用HTML5 contenteditable属性实现的简易网页编辑器，目前我们只实现了文字加粗、倾斜、下划线和对齐方式。
contenteditable属性介绍，使用contenteditable实现文本域输入框功能
最新发布
weixin_48644617的博客
03-04 1209
contenteditable 是 HTML 的一个全局属性，它允许用户直接在网页上编辑元素的内容，就像在文本编辑器中一样。下面从基本概念、使用方法、属性值、浏览器兼容性、使用场景、注项和应用示例几个方面详细介绍。
移动端input、textarea、div（contenteditable ）输入框正则过滤（兼容ios）
lihaofeifei的博客
08-06 1084
目录 一、已知问题及解决方案概述： 1、高度自适应 2、ios无法拼音输入 3、ios过滤符号输入 二、完整代码示例 一、已知问题及解决方案概述： 1、高度自适应 问题：input无法换行；textarea可以换行但是高度没办法自适应。 解决方案：div标签增加contenteditable属性实现div可输入内容，高度自适应。 代码示例： <div class="input" contenteditable="true"></div> 2、ios无法拼..
Vue 实现contenteditable属性的自定义带样式的textarea输入框
wuyinmingyue的博客
01-16 478
实现自定义内容样式的textarea。
wysiwyg.js, 所见即所得contenteditable编辑器( 轻量级 跨浏览器 ).zip
09-18
wysiwyg.js, 所见即所得contenteditable编辑器( 轻量级 跨浏览器 ) 示例：http://wysiwygjs.github.io/最近的更改：闪烁自由标记 API已经更改：Nov 3，2015: classes-> 类 按钮具有任何属性Mar 30，2015: camelcase w
实时监测contenteditable(可编辑文档)的内容发生改变
weixin_33682719的博客
02-24 8311
如果是文本框用onchange,oninput,onpropertychange都可以实时监控值发生变化，但是div设置了属性contenteditable（可编辑文档）就不管用了。 最简单的方法用oninput事件，可惜ie下支持度不好 addEvent(doc,'input',function(){ //do something... }); 那么自己实现一个： ...
深入浅出contenteditable富文本编辑器
weixin_33901843的博客
05-20 2261
富文本编辑器一直是前端领域的一个天坑，但若不是深入接触编辑器开发的工程师，却不一定清楚富文本编辑器到底坑在哪里，作为有幸和编辑器打了一年交道的前端，今天来聊聊Web富文本编辑器的那些事。通常当我们拿到一个带有富文本编辑器的需求时，我们首先要理清这个需求的使用场景，然后我们可以为这些具体的业务场景选择一款合适的开源富文本编辑器，进行定制开发看看目前市面上我们可以选择的开源编辑器的实现方式，大致分为两...
HTML5 - contenteditable 富文本编辑器
qq_25833731的博客
05-26 4921
HTML5 - contenteditable应用
用 contentEditable 快速封装一个组件，产品直呼：你这效果真令我欢喜！！！
weixin_47588164的博客
09-26 1149
整个组件实现起来还是比较简单的，核心就是 contentEditable 属性，但实际以上实现还有很多缺陷，比如删除初始内容再输入时会将输入的内容保持在初始 DOM 元素中而不是创建新元素，以及删除初始内容的过程中针对于表单项的删除十分怪异，后来跟产品沟通了一下都还可以接受就没有再去优化。需要哪些 props？最近已经上手公司的业务了，但是整体难度不大，因为大部分的总结都是写在了内网语雀里，外加下班后回家被杨戬各种虐，“猴欢喜” 的台词听了有小几十遍🤐，所以好久没有在掘金上写过文章了😶。
js限制DIV输入回车
05-15
若要使`div`元素可编辑，我们需要将其`contenteditable`属性设置为`true`，这样`div`就变成了一个富文本编辑器。 接下来，我们利用JavaScript来监听并处理回车键事件。在JavaScript中，我们可以使用`...
设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
09-28
有些Weber可能没有用过contenteditable这个属性，如果想编辑一个DIV里面的内容，这个属性是一个非常不错的选择
使用HTML5中的contentEditable来将多行文本自动增高
09-28
主要介绍了使用HTML5中的contentEditable来将文本自动增高的方法,文章先对contentEditable这个HTML5中的新属性作了一个简单介绍,需要的朋友可以参考下
electron+vue实现div contenteditable截图功能
10-15
`contenteditable`属性允许我们将HTML元素变成可编辑区域，用户可以直接在div内输入文本，类似于一个简单的文本编辑器。 在传统的实现方式中，我们可能会使用`input`或`textarea`元素，通过插入特殊标签来代表表情...
cell13.contentEditable = true; 修改为当鼠标点击其他位置或者回车时变为不可编辑状态
05-21
// 将 cell13 设置为不可编辑状态 }); // 监听键盘回车事件 document.addEventListener(&#39;keydown&#39;, (event) => { if (event.keyCode === 13) { cell13.contentEditable = false; // 将 cell13 设置为不可编辑...
HTML5之contenteditable属性
牛栏山矿泉水
03-18 643
HTML5之contenteditable属性 1、功能说明 （1）功能：允许用户编辑元素中的内容 （2）说明：是一个布尔值，false是不能编辑，true为可编辑 2、分析实例 （1）contenteditable属性为false &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; ...
contenteditable
u012732909的博客
05-18 238
我们在页面上写的大部分标签都是不可以编辑的 但是一旦你给元素加上 contenteditable 属性以后, 就变成可以编辑的了 <div contenteditable> hello world </div> 我们可以写一个内联样式, 写在 body 标签里面 <body> <style contenteditable style="display: block; height: 100px; overflow: auto;">
contentEditable属性
小王的技术库
07-31 9937
我们最常用的输入文本内容便是input与textarea，但是有一个属性，可以让我们在很多标签中，如div,table,p,span,body等，可以像input输入框一样，实现文本编辑，这便是contentEditable属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值