测试了一下 contenteditable=true 浏览器的兼容性

最新推荐文章于 2024-03-05 17:44:52 发布
最新推荐文章于 2024-03-05 17:44:52 发布
阅读量1.3w 收藏 1
点赞数
分类专栏： 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qidizi/article/details/8790376
版权

支持的浏览器:

chrome 12

ie 6 8

苹果safari 5

firefox 5

qidizi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
让你的网站可编辑的实现js代码
01-21
非常的简单 一、打开你要黑的网站， 二、在浏览器的地址栏里输入： 代码如下: [removed]document.body.contentEditable=’true’; document.designMode=’on’; void 0 三、现在你会发现他的页面竟然可以任由你自由修改了！！ 四、按照你自己的意图修改好后，在地址栏中输入： 代码如下: [removed]document.body.contentEditable=’false’; void 0 好了，截图吧，把对方网站给“黑”了~~ 嘿嘿，无害的。可以用来吓一吓人，比保存HTML要方便的多
当div设置contentEditable=true时,重置其内容后无法光标定位
01-18
最近在做一评论功能，需要能够评论表情，那 contentEditable 这个属性就首当其冲了，结果，问题来了… 首先 评论区 长这样：   当输入内容超过限制的时候，清空用户输入超过限制后的内容。   这个好说… 但是清空完了内容，光标居然跑到了最前面，这就很头疼了。 在经过各种搜索之后，找到了解决办法，不多说，上代码！ var _div = document.querySelector('.discuss_area'); var range = document.createRange(); range.selectNodeContents(_div); range.collapse(
contentEditable属性为true的前端编辑器
最新发布
notbaldness的博客
03-05 960
前端常用的输入文本内容便是input与textarea，但是有一些他们有一些局限性，比如input只能输入一行，textarea虽然可以通过设置rows属性来动态调整高度，但是他们都不能存在多种格式的内容，更不能有标签一样样式了。浏览器对于一些dom元素有一个属性contenteditable可以快速将该元素变成可编辑的输入框。
Contenteditable=“true“属性让HTML标签中的内容（如Div）可编辑（相当于Input、Textarea）
qhdzj87的专栏
01-18 2661
在HTML5中，我们可以给HTML标签设置contenteditable="true"属性实现用户在浏览器端对标签中的内容进行编辑。 例如： <div contenteditable="true">可以编辑里面的内容</div> Contenteditable属性兼容所有浏览器（IE6之前的版本是否兼容未测试），在有些时候我们完全可以用div去替代input或者textarea来实现数据的收集。例如，在使用ajax的时候，在提交表单时我们可以获取div的内容。...
contentEditable实现div可编辑，控制插入节点（兼容IE）
ccxh505398633的博客
11-12 1万+
实现可文字编辑也可插入节点的功能 展示如下： html5中contentEditable属性规定是否可编辑元素的内容，给需要编辑的节点添加contentEditable=“true”。 兼容性： 当点击Button时在编辑框内增加节点： 一开始div中加的span标签，发现有几个缺陷： 点删除键时span不会删除整个，而是一个一个删除span里的字符串 当有连续的span时，光标会超出容器...
使用contenteditable=“true“改造div可编辑文本框
yaoqiuquan的博客
05-24 1281
contenteditable=“true” 可编辑 contenteditable=“false” 禁止编辑 contenteditable=“plaintext-only” 可以让编辑区域只能键入纯文本 不建议使用兼容性不好一：简单版 使用例子 二：升级版（可插入图片或者粘贴图片） 使用例子： 显示结果：...
contenteditable兼容问题
weixin_30299709的博客
12-04 1610
正常情况下用contenteditable,IE下有兼容性问题需要将个别字母变成大写的contentEditable。 获取contenteditable的内容 对html进行处理 兼容 chrome、IE、Firefox var html = $(this).html();if(html){ var lineSign = html.indexOf('<div>'); ...
contenteditable=“true“属性的标签输入框，内容实现高度自适应以及其他处理
Yukinoshita_kino的博客
12-24 6566
一. 功能需求 1.1输入框未获取焦点、失去焦点且输入框无内容的情况下，如下图： 1.2输入框获取焦点情况下，如下图： 1.3用户最多输入200个字符， 想要的效果如下图：（给出提示，只保留200个字符，且光标在文末） 而不是这样的效果，如下图：（光标跑到了文首） 1.4复制内容进输入框时，想要的效果如下图： 而不是这样的效果，如下图： 二. 代码实现 刚开始我选择的是textarea标签，但是该标签不能随着文本内容自动变化高度，需要通过js操作dom来动态改变，比较麻烦，我就放弃了。选择了HT
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
08-31
主要给大家介绍了利用vue2如何实现div contenteditable="true"，就是类似于v-model的效果，文中给出了两种解决的思路，对大家具有一定的参考价值，有需要的朋友们下面来一起看看吧。
Vue中div contenteditable 的光标定位方法
11-30
在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框 在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后 function keepLastIndex(obj) { console.log(obj) console....
浏览器兼容 - contenteditable元素的光标不显示
Caesar's blog
01-14 4958
问题描述 代码如下 &lt;span contenteditable="true"&gt;&lt;/span&gt; 这句代码在Chrome下光标正常显示，但在Safari中无法显示光标。 解决办法 此时需要设置span的样式如下 span{ display: inline-block; min-width: 1px; } 分析 Safari下之所以不显示，是因为DOM元素的宽度不够光标显...
修改页面快捷命令document.body.contentEditable=‘true‘；
热门推荐
小清华的小哥哥
08-28 1万+
众所周知 F12可以临时修改网页，达到‘伪造’的目的，但每次都需要找到修改元素的位置才行，不是很方便。 下面有两个快捷命令： 1、进入开发者模式（F12或鼠标右击后选择检查），在开发者模式中进入控制台（ctrl+shift+k或鼠标左击‘控制台’），然后在控制台下方的命令窗口内输入命令document.body.contentEditable='true'; 然后回车，就可以像编辑word文档一样随意编辑原始页面了（ps：此时退出开发者模式也可以继续编辑，只要不刷新页面就行）。 2、同上，进入控制台后，输
contenteditable=true 在各个浏览器的兼容性
weixin_34378922的博客
08-03 1869
2019独角兽企业重金招聘Python工程师标准>>> ...
编辑网页document.body.contentEditable=‘true‘；
小屁孩大帅-保密的博客
07-31 1万+
发现一个好玩的，可以用来编辑网页 打开console输入，即可。 document.body.contentEditable='true';
contenteditable ie下不能选中_前端基础：面试笔试常见的IE兼容问题，幸好现在是移动端的天下...
weixin_42538645的博客
12-27 288
1.hack2.IE6 横向margin加倍产生因素：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。解决方法：display：inline；3.IE6下默认有行高解决方法：overflow:hidden;或font-size:0;或line-height：xx px；4.在各个浏览器下img有空隙产生因素：回车 。解决方法：d...
让网页变得可编辑，学会这个技巧，可以出去大拽了
qq_34955471的博客
06-24 1807
设置页面为可编辑 document.body.contentEditable=true 使用方式在在浏览器中打开对应的网址，如百度 然后按 F12 键盘（在键盘右上方） 在弹出的窗口中选择 console ，然后在空白地方复制上面的代码，点击回车 如下图 原图 编辑后 为什么会这样呢？ 原因c...
一行代码就能随意修改网页内容
web全栈开发的博客
09-02 1万+
一、打开你想要编辑的网站 我这里拿百度首页做个示范。 二、进入开发者模式 按F12进入开发者模式 。 三、输入神奇代码 1、打开随意编辑网页内容的功能 选择Console，在命令框输入document.designMode='on'后按回车。 这时你可以发现，点到文字处，会出现小光标，这就说明你可以修改这里的内容。 此时直接就可以修改光标处的内容，这里我随便改一下（不是真的改，刷新页面即可恢复原来网页内容）。 2、关闭随意编辑网页内容的功能 选择Console，在命令框...
碰到的一些IOS兼容性问题
qq_36718095的博客
03-10 761
1、其中不可编辑的输入框，在IOS上字体颜色会很浅； 解决：设置其opacity:1; 2、编写的H5聊天页面，其中输入框因为需要添加表情，所以使用div加 contenteditable="true，模拟输入框，添加加一个样式-webkit-user-select:auto，可输入文字和表情，但是输入框的呼入文字时，如果点击其他地方或者输入框内，则，不可再次编辑文字； 未解决 3、
将浏览页面变为可编辑状态
lixinkuan的博客
08-05 2715
调试过程往往需要直接去掉一些元素，可以同过浏览器执行js来实现页面元素可编辑。 地址栏中键入如下后回车： javascript:document.body.contentEditable='true';document.designMode='on'; void 0 浏览器如果跳转，则需要通过浏览器调试模式进入该状态，按F12找到console控制台功能，输入上面代码回车即可编辑所有元素。 ...
contenteditable=true
06-28
### 回答1： contenteditable=true是一种HTML属性，允许用户在网页上编辑和修改文本内容。这个属性可以应用于任何HTML元素，包括段落、标题、表格、列表等等。通过设置contenteditable=true，用户可以直接在网页上进行编辑，而不需要使用外部编辑器或者其他工具。这个属性在一些网站上被广泛使用，例如博客、社交网络、在线文档等等。 ### 回答2： contenteditable=true是一种HTML属性，用于设置网页中的元素是否可编辑。如果将该属性设置为true，用户可以在浏览器中直接编辑网页中的文本、图像和其他元素。 使用contenteditable=true可以方便用户直接在网页上进行修改、编辑，而不需要再使用外部编辑器。这种方式通常用于Web应用程序中，用户可以自由编辑自己的信息，并实时保存修改结果。此外，contenteditable=true还可以用于创建在线富文本编辑器，以提供更完整的编辑功能。 但是，使用contenteditable=true也存在一些问题。首先，内容可编辑后会增加需要处理的交互和验证逻辑，因此需要反复测试和优化。其次，由于contenteditable=true直接允许用户在网页上进行修改操作，因此可能会出现不合法的修改，如删除关键信息、非法内容等等。为此，需要对用户输入进行限制和监测，以预防此类问题的出现。 总的来说，contenteditable=true是一种方便的HTML属性，可以为用户提供更好的编辑体验和操作便利性。但同时也需要进行完善的验证和限制，以保障网页的安全性和正确性。 ### 回答3： contenteditable=true是一种HTML特性，允许将网页上的任何元素（比如文本、图片、表格等）设为可编辑状态。它使得用户可以直接在网页上编辑内容，像在Word文档中一样方便。 使用contenteditable=true的好处是可以极大地提高用户的编辑效率，比如在撰写长篇文章或者编辑表格时。用户不需要再复制粘贴内容到其他软件中进行编辑，而是可以直接在网页上进行操作。此外，使用contenteditable=true可以让用户更好地掌控网页内容的布局和格式，很大程度上可以提升用户体验。 尽管contenteditable=true提供了方便的编辑功能，但是它也存在一些问题。首先，由于它允许用户随意编辑网页内容，这可能导致网页的格式混乱不堪、样式失调甚至内容错误。其次，使用contenteditable=true可能会使得网页的安全性降低，因为用户可以随意修改网页内容，这可能导致一些潜在的安全隐患。 因此，在使用contenteditable=true时，需要注意一些事项。比如，要对输入内容进行验证和过滤，以防止恶意的、不符合规范的输入。此外，还需要在发现有人在不合理地修改网页内容时，做出适当的处理，比如禁止该用户进一步的编辑等。 总之，contenteditable=true是一个方便快捷的特性，可以提升用户的编辑效率，但是需要注意潜在的安全问题。在使用时，需要合理斟酌。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值