div可编辑contentEditable和designMode
来源:互联网 发布:算法交易和量化交易 编辑:程序博客网 时间:2024/05/22 00:20
如果要对网页中的一段文本内容进行编辑一般常用的方法是放在一个<input type=’text’ />,但是今天我们要介绍的是不用文本框也可以进行编辑,如标题所示~
设置div或页面元素为可编辑
设置方式
- contenteditable=”true”,直接在标签上设置contentEditable为true,为false时则恢复到正常状态
1
<
p
contenteditable
=
"true"
id
=
"edit_p"
style
=
"line-height: 1.5;"
>编辑的文本
2
</
p
>
- 通过脚本来设置
1
window.onload =
function
() {
2
var
edit_p = document.getElementById(
'edit_p'
);
3
edit_p.onclick =
function
(){
4
this
.contentEditable =
true
;
5
this
.style.cssText =
'border:2px solid #666'
;
6
}
7
}
此属性对IE6以上+firfox/chrome/opera都有效~,窃喜~
isContentEditable判断元素是否处于可编辑状态
有的元素默认就是可编辑的,比如文本框,在设置前有时候需要判断是否是可编辑状态可以用element.isContentEditable,该属性是只读的,其结果为布尔值。
contentEditable元素的继承和嵌套
若设置为true则会被后代元素继承,但是可以通过js把子元素强制设置为false。
将整个文档设置为可编辑模式
可以使用document.designMode = ‘on’ 来开启整个文档的可编辑状态,比如目前很常见的可见即所得编辑器一般都是设置引用一个iframe,然后设置该iframe的document.designMode为’on’,来对其中的内容进行操作。
关于整个属性,有两点需要注意:
- document.designMode是一个可读写属性
- 当文档处于设计模式时,将不运行脚本
- div可编辑contentEditable和designMode
- designMode和contentEditable的属性的介绍
- 内容可编辑contenteditable
- 可编辑div:contenteditable之ctrl+enter换行,enter发送
- html5 contenteditable 可编辑属性
- HTML5可编辑属性contenteditable
- 编辑器中designMode和contentEditable的属性的介绍
- IFrame 系列1 ----designMode和contentEditable属性全方位解析
- contentEditable 元素可编辑 web打印
- html5 contenteditable 实现table可编辑
- 禁用webkit textarea可调整大小和文本框焦点时边框 , contenteditable 和designMode
- 关于JS的contentDocument,contentEditable,designMode
- [Phonegap+Sencha Touch] 移动开发66 sencha touch可编辑的div(ContentEditable=true)下,长按不弹出“复制粘贴”菜单的解决办法
- DIV可编辑
- 让DIV可编辑
- 激活编辑器的两种方式:contentEditable与designMode
- html5-contentEditable在线编辑
- jquery 实现可编辑DIV
- Eclipse反编译工具Jad及插件JadClipse配置
- 精品IT网站
- Python模拟Web Fetion给好友发送信息(数据库编程模块)
- 随机数函数的应用归纳
- 影响力
- div可编辑contentEditable和designMode
- Chapter 9 JavaScript Classes,Constructors,and Prototypes - - - 9.1 Constructors
- boost::scoped_ptr 源码分析
- JavaScript显示自动提示文本
- win8找回win7感觉的一些小技巧【转】
- linux 底层文件访问(库函数)
- 部署django项目到apache
- Android Service 服务(二)—— BroadcastReceiver
- 黑马程序员-内部类和异常处理