html设置可编辑状态,HTML5 - 使某个页面元素或整个页面可编辑

1，把任何元素的contenteditable属性设置成true，点击即可以编辑该元素的内容

contenteditable="true">

你可以编辑这段文本

2，也可以使用js来动态的开启和关闭编辑功能

//让元素可以编辑

function startEdit(){

var element = document.getElementById("editableDiv");

element.contentEditable = true;

}

//让元素恢复正常状态

function stopEdit(){

var element = document.getElementById("editableDiv");

element.contentEditable = false;

//显示出编辑后的内容

alert("当前内容是："+ element.innerHTML);

}

你可以编辑这段文本

开始编辑

停止编辑

3，使用designMode编辑整个页面

如果让整个页面都可以编辑，那么页面上的按钮事件也会失效。所以通常会把要编辑的文档放在一个元素中，而这个元素就充当了一个超级的编辑框。

下面样例是点击“开始”则可以编辑iframe里加载的网页。点击“停止”后，iframe里的页面退出设计模式变为不可编辑，同时下方div显示页面编辑后的html代码。

(注意：iframe加载的页面要在同一个域下才能编辑)

//让iframe转为设计模式

function startEdit(){

var editor = document.getElementById("pageEditor");

editor.contentWindow.document.designMode = "on";

}

//让iframe设计模式关闭

function stopEdit(){

var editor = document.getElementById("pageEditor");

editor.contentWindow.document.designMode = "off";

//显示编码后的html代码

var editedHTML = document.getElementById("editedHTML");

editedHTML.textContent = editor.contentWindow.document.body.innerHTML;

}

开始编辑

停止编辑

html设置可编辑状态,HTML5 - 使某个页面元素或整个页面可编辑相关推荐

编辑状态打开mysql表,Excel2016中数据透视表的编辑操作方法
在Excel2016中建立初始的数据透视表后,可以对数据透视表进行一系列的编辑操作(如添加或删除字段.改变字段的显示顺序.更改统计字段的算法以及数据更新等),以达到不同的统计目的. 一.查看各门店数量 ...
html5跨域获取页面元素,iframe嵌套页面跨域
如何用javascript 跨域获取iframe子页面的元素信息我的iframe嵌套在别人页面上,在iframe中ajax访问...以前没这问题啊,我更新了一下界面,难道是换了个jquery版本? ...
奥斯汀页眉怎么设置_编辑页眉页脚怎么样每页不相同（编辑页眉页脚设置教程分享）...
除分享删除方法外,还分享页眉横线的本质.接下来看它们具体的操作方法,操作所用 Word 版本为 Word 2016. 一.Word 页眉基本操作 (一)Word 插入页眉 1.选中"插入&q ...
HTML5新增的结构元素和网页元素
1.什么是HTML5 HTML5是用于取代HTML和XHTML的标准版本新特性: 新的语义化标签,比如header.footer.nav 新的表单控件,比如email.url.search 用于绘画 ...
使html表格可编辑状态,js+Html实现表格可编辑操作
本文实例为大家分享了js+Html实现表格可编辑操作的具体代码,供大家参考,具体内容如下功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容. 点击增加行,在 ...
设置ALV单元格可编辑状态
在使用ALV显示列表的过程中,我们可以使用IT_FIELDCAT参数设置某一个字段的可编辑状态.但是,要设置具体的单元格的可编辑状态对于对ALV不是很了解的人来说是一个头大的问题. 具体单元格可编辑状 ...
EditText设置可以编辑和不可编辑状态
1.首先想到在xml中设置android:editable="false",但是如果想在代码中动态设置可编辑状态,没有找到对应的函数 2.然后尝试使用editText.setFoc ...
js点击使内容变成可编辑状态
一个有内容的标签,用原生JS点击按钮使内容变成可编辑状态,然后使用保存数据.这个是点击编辑按钮使得标签内容替换为文本域来实现的. 代码如下 <!DOCTYPE html> <html ...
android设置EditText为不可编辑状态
最近做一个项目,需要动态设置EditText为不可编辑状态,根据某些条件判断,设置EditText为可编辑状态: eidtext.setFocusableInTouchMode(false);//不可 ...
使ALV控件中的内容可编辑
这应该是一个非常有用的功能,这样我们便可以用它来代替table control来编出一些有这现成功能的界面来.实际上,让alv中的内容可以被编辑与alv的事件无关.但是经常需要验证输入的数据,所以还是 ...

html设置可编辑状态,HTML5 - 使某个页面元素或整个页面可编辑

html设置可编辑状态,HTML5 - 使某个页面元素或整个页面可编辑相关推荐

最新文章

热门文章