当前位置: 代码迷 >> Web前端 >> 游览器怎么变成记事本效果-20130911
  详细解决方案

游览器怎么变成记事本效果-20130911

热度:38   发布时间:2013-09-14 13:03:22.0
游览器如何变成记事本效果-20130911
1、效果及功能说明

让游览器,打开后变成可输入的记事本模式

2、实现原理

contentEditable html中的一个属性。设置html的contentEditable=‘true’时,即可开启该元素的编辑模式

Html中的contentEditable的属性可以打开某些元素的可编辑状态.contentEditable可以让div或整个网页,以及span等等元素设置为可写。常用的输入文本内容便是input与textarea 使用contentEditable属性后,可以在div,table,p,span,body,等等很多元素中输入内容.

contenteditable是一个枚举类型的属性,可供选择的值有 空字符串、 true、false 或 inherit(默认)。
当为空字符串时,效果和true一致。
主要的方法

<!DOCTYPE html>

<body>
<p contenteditable></p>
</body>
</html>


3、效果图




4、运行环境

contentEditable已在html5标准中得到有效的支持。
在IE8下设置表格可写不支持,其他元素没有问题。在FireFox运行一切正常。谷歌浏览器运行一切正常 (自己测验过在ie最新的游览器下也可以正常的实现)

5、代码

<!DOCTYPE html>

<body>
<p contenteditable>这个是可以写的</p>
</body>
</html>