开启Html编辑模式的contentEditable属性
来源:互联网 发布:php授权验证系统2.7.0 编辑:程序博客网 时间:2024/05/15 08:08
contentEditable html中的一个属性。设置html的contentEditable=‘true’时,即可开启该元素的编辑模式。
Html中的contentEditable的属性可以打开某些元素的可编辑状态.也许你没用过contentEditable属性.甚至从未听说过.contentEditable的作用相当神奇.可以让div或整个网页,以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea 使用contentEditable属性后,可以在div,table,p,span,body,等等很多元素中输入内容.
如果想要整个网页可编辑,请在body标签内设置contentEditable
contentEditable已在html5标准中得到有效的支持。
在IE8下设置表格可写不支持,其他元素没有问题。在FireFox运行一切正常。谷歌浏览器运行一切正常
使用方法
html中 <p contentEditable=“true”>;
js 中 document.all("txt").contentEditable =true;
应用
前段UI的美化,表单元素通过css样式不一定能达成设计师的要求,通过开启 div p span等元素的contentEditable,来实现表单元素的功能(需要js搭配)。
举例:
用于在textarea中除ie外不能插入图片。
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
- <script>
- function img(){
- var location1 = prompt("请输入图片的地址:","http://");
- if(location1){
- selImg(location1);
- }
- }
- function selImg(s){
- if(!s){return false;}
- var h=s.substr(s.lastIndexOf(".")+1,3);
- if(h=="gif"||h=="jpg" || h=="GIF" || h=="JPG"){
- Edit=document.getElementById("idEdit")
- Edit.innerHTML+='<img src='+s+'>'
- }
- else{
- }
- }
- </script>
- <div NAME=EditCtrl id=idEdit contentEditable=true style="width:100%;height:200px;border:1px solid #666666"> <b>hubro</b>
- </div>
- <input type="button" name="Submit" value="插入图片" onclick="img()">
编辑本段HTML5中的解释与规定
contenteditable是一个枚举类型的属性,可供选择的值有 空字符串、 true、false 或 inherit(默认)。
当为空字符串时,效果和true一致。
当一个元素的contenteditable状态为ture(contenteditable属性为空字符串,或为true,或为inherit且其父元素状态为true)时,意味着该元素是可编辑的。
否则,该元素不可编辑。[1]
注意:HTML5与HTML4的不同,对于contentEditable HTML5是趋于xhtml,使用的是全小写contenteditable,而HTML4 使用的是contentEditable
- 开启Html编辑模式的contentEditable属性
- html5开发教程:开启Html编辑模式的contentEditable属性
- 开启html元素的编辑模式contenteditable="true"
- contenteditable="true" 开启元素的编辑模式
- html contentEditable属性
- html全局属性-contenteditable
- html中contentEditable属性
- html5 contenteditable 可编辑属性
- HTML5可编辑属性contenteditable
- 给html开启编辑模式
- HTML 5 全局 contenteditable 属性
- 实用的属性:contentEditable
- contenteditable编辑框防止不安全HTML代码
- H5的新属性contenteditable
- html contenteditable
- contentEditable属性
- contenteditable属性
- ContentEditable="false" 文本框是否允许编辑 asp。net属性
- 操作iPart表的行和列 -2
- 无法找到hal.dll文件怎么办?
- 浅析PageRank算法
- UTF 8 编码规则
- BASE64 编码原理
- 开启Html编辑模式的contentEditable属性
- 第一个程序
- QuotePrintable编码原理
- DWR在Tomcat报错:CSRF Security Error
- JavaScript 简介
- 第三届蓝桥杯复赛题解析
- Away3d 三维物体的操控
- 幸运28的单双投注技巧
- 汉字区位码