html5之designMode属性

最新推荐文章于 2025-05-08 17:45:08 发布
最新推荐文章于 2025-05-08 17:45:08 发布
阅读量2.8k 收藏
点赞数
分类专栏： html5 文章标签： designMode
本文介绍了designMode属性的作用，即控制整个页面是否可编辑。通过设置document.designMode='on'，可以使页面上的任何支持contentEditable属性的元素变为可编辑状态。文章还提到了不同浏览器对该属性的支持情况：IE8出于安全原因不支持，而IE9及之后版本支持；Chrome3+和Safari采用内嵌frame方式实现；Firefox和Opera则直接支持。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

designMode属性

 

 

  •    用来指定整个页面是否可编辑，当页面可编辑时候，页面上任何支持contentEditable属性的元素都变成可编辑状态。
  •    只能在Js被编辑修改
  •    该属性有两个值  ---- "on" (页面可编辑)| "off" (页面不可编辑) 

document.designMode = "on";

 

 

  •  IE8出于安全考虑，不允许使用designMode属性让页面进入编辑状态
  •  IE9允许使用designMode属性让页面进入编辑状态
  •  Chrome3+ 和 Safari 使用内嵌frame的方式，该内嵌frame是可编辑
  •  FF和Opera允许使用designMode属性让页面进入编辑状态
H5DSHTML5Designsoftware这是一款基于WEB的H5制作工具
08-10
H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。示
HTML中的designMode 属性
ABing
01-05 675
HTML DOM designMode document.designMode属性设置或返回文档是否可编辑 document.designMode 控制整个文档是否可编辑。有效值为 “on” 和 “off” 。根据规范，该属性默认为 “off” 。Firefox 遵循此标准。早期版本的 Chrome 和 IE默认为 “inherit” 。从 Chrome 43 开始，默认值为 “off” ，并且...
只需一行代码，任意网页秒变可编辑
最新发布
huomore的博客
05-08 261
在我们日常工作中，可能会遇到截图页面的场景，有时页面有些内容不符合要求，我们可能需要进行一些数值或内容的修改。如果你会PS，修改内容难度不高，如果你是前端，打开控制台也能通过修改dom的方式进行简单的文字修改。今天，我就来分享一个冷门又实用的前端技巧 —— 只需一行 JavaScript 代码，让任何网页瞬间变成可编辑的！打开浏览器控制台（F12），复制粘贴这行代码，回车即可。甚至，还可以直接复制图片多媒体等文件。如果你想关闭此功能，输入即可。
html5 design,优秀的HTML5网页设计抓住你的视线
weixin_39851279的博客
07-04 216
Thanks for featuring my site - as a freelance front-end developer, the recognition of my peers is very important to me!One thing about my site which may not be apparent - and which I feel is a relativ...
JsDesignMode第一篇
qq_45517916的博客
12-09 484
1.灵活的语言JS 1.1验证表单 function checkName(){ //验证姓名 } //创建了全局变量 1.2函数的另一种形式 var checkName = function(){ //验证姓名 } //别人定义相同的方法会覆盖掉原有的方法...
任意修改网页（document.designMode = “on“）
小刘的博客
10-25 1037
将网页变为可编辑模式
编辑器中designMode和contentEditable的属性的介绍
10-30
与`designMode`不同，`contentEditable`是HTML5引入的一个属性，它可以应用于任何HTML元素，如`<div>`、`<p>`、`<span>`等，使得这些元素及其所有子元素变得可编辑。例如，将一个`<div>`的`contentEditable`属性设置...
如何利用designMode属性和JavaScript动态地在textarea中嵌入和编辑HTML代码？
11-07
要实现在textarea中嵌入和编辑HTML代码，你可以利用iframe的designMode属性或者直接操作DOM元素。首先，我们来看如何使用designMode属性。 参考资源链接：[textarea中显示HTML代码的实现方法]...
Web时代变迁及html5与html4的区别
12-13
在HTML5中，最显著的变化之一是新增了结构性元素。例如，`<header>`、`<footer>`、`<nav>`、`<article>`和`<section>`等标签，它们提供了更清晰的文档结构，有助于搜索引擎优化（SEO）和辅助技术（如屏幕阅读器）更...
HTML5废弃的标签和属性
贪吃ღ大魔王
04-08 1244
HTML5废弃的标签和属性 一、废弃的标签和属性 　　1、表现性元素 　　　　a) basefont 　　　　b) big 　　　　c) center 　　　　d) font 　　　　e) strike 　　　　f) tt　　 2、框架类元素 　　　　a) frame 　　　　b) frameset 　　　　c) noframe 3、其他元素 　　　　a) acronym -- 可以用 abbr 取代 　　　　b) applet -- 可以用 object 代替 　　　　c) i
JsDesignMode第三篇
qq_45517916的博客
12-11 363
结构型设计模式 如何将类或对象组合成更大、更复杂的结构,简化设计1.外观模式 1.1为一组复杂的子系统接口提供一个更高级的统一接口 通过这个接口对子系统接口的访问更容易 //添加一个点击事件 document.onclick = function(e){ e...
HTML５——使用户可编辑页面的contentEditable属性与designMode属性
Lanly-Li的博客
07-31 823
HTML５之新增属性contentEditable、designMode，这两个属性。使用户可以直接编辑网页页面内的内容，非常有趣，大家一起来玩呀！！！ contentEditable 值：true／false（true代表可编辑，false相反） 我们来玩一下 <!DOCTYPE html> <html> <head> <meta http-...
JsDesignMode第二篇
qq_45517916的博客
12-10 217
创建型设计模式 处理对象创建的设计模式,控制对象的创建来避免基本对象创建时 可能导致设计上的问题或增加设计上的复杂度1.简单工厂模式 1.1也称为静态工厂方法 由一个工厂对象决定创建某一种产品对象类的实例,创建同一类对象 1.2类太多,提供一个 //封装在一个函数中,只需要记住这个函数,不需要知道...
JsDesignMode第四篇
qq_45517916的博客
12-16 267
行为型设计模式 不同对象之间职责划分或算法抽象,类或对象之间的交流模式并加以实现 1.模板方法模式 父类定义一组操作算法骨架,将实现步骤延迟到子类中 子类可以不改变父类算法结构的同时重新定义算法中某些实现步骤 1.1提示框归一化 将多个模型抽象化归一,从中提取出来一个最基本的模板 可以作为...
js designMode contentEditable 编辑在线网页
会飞的程序猿
10-12 351
只要打开浏览器控制台，输入以下内容，可以编辑页面上的任何内容。 document.body.contentEditable = 'true' 或者 document.designMode = 'on'; 两个效果一样
JsDesignModel第五篇
qq_45517916的博客
12-23 728
技巧型设计模式 通过特定技巧来解决组件某些方面的问题 1.链模式 在当前对象方法中将当前对象返回,实现对同一个对象多个方法的链式调用 1.1深究jQuery 链模式基于原型继承,在每一个原型方法的实现上都返回当前对象this 使当前对象一直处于原型链作用域的顶端 1.2.原型式继承 ...
ime-mode属性解释
weixin_30378311的博客
05-02 435
有时项目需要禁止用户输入中文、符号等，减少用户输入出错误的可能性，css属性有这样的功能。 ime-mode的语法解释如下： ime-mode : auto | active | inactive | disabled 取值： auto : 默认值。不影响IME(Input Method Editors 输入法编辑器)的状态。与不指定 ime-mode 属性时相同 active : ...
document.designMode=‘on‘设计网页；随意改动网站内容
热门推荐
原来是肖哈哈的博客
02-04 2万+
1.打开一个需要更改的网站，按F12进入网页控制台界面,点击Console 2.在Console下的输入框输入：document.designMode='on'，再按回车键 3.然后就可以随意修改页面了，可以像
【DesignMode】设计模式简介
红尘道，红尘练心
06-30 383
1) 第 1 层：刚开始学编程不久，听说过什么是设计模式2) 第 2 层：有很长时间的编程经验，自己写了很多代码，其中用到了设计模式，但是自己却不知道3) 第 3 层：学习过了设计模式，发现自己已经在使用了，并且发现了一些新的模式挺好用的4) 第 4 层：阅读了很多别人写的源码和框架，在其中看到别人设计模式，并且能够领会设计模式的精妙和带来的 好处。5) 第 5 层：代码写着写着，自己都没有意识到使用了设计模式，并且熟练的写了出来。1) 设计模式是程序员在面对同类软件工程设计问题所总结出来的有用的经验，模式
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值