本文主要是介绍2.2.1新增-contentEditable属性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"/><title>2.2.1新增-contentEditable属性</title></head><body>HTML5为大部分HTML元素都增加了contentEditable属性,如果将该属性设为true,那么浏览器将会允许开发者直接编辑该HTML元素里内容。此处的HTML元素并不是指那些原本就允许用户输入的表单元素,如文本框、文本域之类的,而是可以把table、div等元素变成可编辑状态。<br>contentEditable属性具有“可继承”的特点:如果一个HTML元素的父元素是“可编辑”的,那么它默认也是可编辑的,除非显式指定contentEditable="false"。<br>eg:将div、table元素转换成可编辑状态。<br><!-- 直接指定contentEditable="true"表明该元素是可编辑的 --><div contentEditable="true" style="width:500px;border:1px solid black">疯狂Java讲义<!-- 该元素的父元素有contentEditable="true",因此该表格也是可编辑的 --><table style="width:420px;border-collapse:collapse" border="1"><tr><td>疯狂Java讲义</td><td>疯狂Android讲义</td></tr><tr><td>轻量级Java EE企业应用实战</td><td>经典Java EE企业应用实战</td></tr></table></div><hr/><!-- 这个表格默认是不可编辑的双击之后该表格变为可编辑状态 --><table id="target" οndblclick="this.contentEditable=true;"style="width:420px;border-collapse:collapse" border="1"><tr><td>Java</td><td>Ruby</td></tr><tr><td>C/C++</td><td>Python</td></tr></table><br><br>除此之外,HTML5为允许设置contentEditable属性的元素提供了isContentEditable属性,当该元素处于可编辑状态时,该属性返回true,否则返回false。<br>当用户编辑完成后,用户编辑的内容就会直接显示在该页面中(不要刷新页面,一旦刷新页面就会重新加载,编辑的内容会丢失),开发者可以通过该元素的innerHTML属性来获取编辑后的内容。</body>
</html>
这篇关于2.2.1新增-contentEditable属性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!