游览器如何变成记事本效果-20130911 - - ITeye博客

`

xjwolaile

浏览: 343431 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

幻紫1992：还有分页的功能、、(⊙o⊙)嗯
[JS代码库]
幻紫1992：就是没有返回顶部的按钮，这个页面、、
[JS代码库]
幻紫1992：很受用，O(∩_∩)O谢谢啦~
[JS代码库]
nlnl520coco：想下个东西规则太苛刻了网站得改进
[JS代码库]
hxp520520： new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029

游览器如何变成记事本效果-20130911

博客分类：

学习
html5
前端技术

阅读更多

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>

查看图片附件

分享到：

serialize的作用-20130921 | 如何提升页面性能优化-20130909

2013-09-11 23:17
浏览 610
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

如何设置chrome google浏览器字体: 上述代码将使得Chrome浏览器中所有页面的字体变为“微软雅黑”。需要注意的是，这里使用的字体名称必须为英文名。 3. **字体名称的转换**：如果需要使用特定的中文字体（如华文行楷），则需查询并使用该字体的英文...

基于vue2.0+vuex+localStorage开发的本地记事本示例: 在记事本应用中，localStorage被用来持久化用户创建的事件数据，即使用户关闭了浏览器，之前记录的事项也能在下次打开时恢复，实现了数据的本地化存储。项目结构清晰，使用vue-cli脚手架初始化，这是一套自动化...

JavaScript实现简单日历效果: 在现代的Web开发中，JavaScript是一种广泛使用的客户端编程语言，用于在浏览器端提供动态的网页交互。本文将介绍如何使用JavaScript实现一个简单但功能丰富的日历效果。日历效果的实现一般涉及以下步骤：首先，...

电脑使用技巧大全荟萃1.doc: 1. **清除搜索历史**：在浏览器搜索框中，将鼠标移动到想要删除的历史记录上，当其变成蓝色时按下 `Delete` 键。 2. **清除自动填写内容**：依次点击“工具”-“Internet 选项”-“内容”-“自动完成”-“清除表单”...

win7 保护眼睛颜色设置: 通过以上步骤，你可以将各种程序界面（例如Word、记事本等）的背景颜色由白色更改为豆沙绿色，这种颜色对眼睛更加友好，有助于减少视觉疲劳。 ##### 2. PDF格式背景改变方法如果你经常阅读PDF文档，也可以轻松地...

文本编辑器TextPad-5.20: 在网页编辑方面，TextPad支持直接预览HTML文件，用户可以直接在编辑器内部查看网页效果，而无需频繁地在编辑器和浏览器之间切换。此外，TextPad还可以直接运行和调试JavaScript，对于前端开发者来说，这是一个非常...

WinXP如何将FLASH设置为动态桌面背景.docx: 在Windows XP系统中，用户可以通过特定的步骤将Flash动画设置为动态桌面背景，以此增加桌面的视觉效果和个性化。下面详细介绍这一操作的具体方法：首先，你需要一个Flash动画文件（.swf格式）。这个文件可以是从...

(完整版)《网页制作》期考试题答案.docx: 10. 查看网页源代码通常通过浏览器的“查看”菜单选择“源文件”，源代码将用记事本或其他文本编辑器显示。 11. `<html>`和`</html>`是HTML文档的起始和结束标记，所有内容都在这对标记内。 12. Dreamweaver 8可以...

《程序天下：JavaScript实例自学手册》光盘源码: 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到Excel 19.12 JavaScript读取自身文件内的XML 19.13 将XML文件绑定到table ...

程序天下:JavaScript实例自学手册: 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到Excel 19.12 JavaScript读取自身文件内的XML 19.13 将XML文件绑定到table ...

2021-2022计算机二级等级考试试题及答案No.19662.docx: 1. 快捷键Ctrl+S常用于保存当前编辑的文档，无论是在记事本还是写字板中。 2. 程序执行的效率不仅与程序的控制结构有关，还与数据的存储结构、算法设计、硬件性能等因素紧密关联。选项A正确。 3. 第四代计算机主要...

把flash动画设置为XP系统动态背景的方法.docx: 然后，你可以用浏览器打开这个文件，检查Flash动画是否能正常播放。最后，设置这个HTML文件为Windows XP的活动桌面背景。右键点击桌面，选择“属性”，然后切换到“Web”选项卡。确保“按Web页方式查看活动桌面”...

win7设置眼睛保护色窗口.docx: 步骤7：设置成功后，不仅桌面环境，就连Word文档、记事本等应用程序的背景色也会自动变为豆沙绿，提供一个更为舒适的阅读环境。此外，如果你希望在浏览网页时也能享受到同样的保护色效果，可以借助浏览器插件。以...

网页制作实例: 在这个例子中，`<title>`标签设置了网页的标题，`<body>`标签内的文本是显示在浏览器中的内容，`<b>`标签使得文本变为粗体。通过上述介绍，我们可以理解HTML的基本原理和应用。在实际的网页制作过程中，还会涉及到...

全国专业技术人员计算机应用能力考试全真模拟试题答案.pdf: 4. **显示记事本状态栏**：通过开始菜单找到“记事本”，在“查看”菜单中勾选“状态栏”，以显示文档的相关信息。 5. **设置默认操作系统和启动时间**：在我的电脑属性中选择“高级”->“启动和故障恢复设置”，在...

2021-2022计算机二级等级考试试题及答案No.2696.docx: 1. **Word预览模式**：在Word中，一旦进入预览窗口，鼠标指针会变为放大镜，用户可以使用放大/缩小按钮来调整视图大小，这允许用户在打印前检查文档的布局和格式。 2. **编码问题**：在电子邮件中出现乱码通常是...

2011全国专业技术人员计算机应用能力考试全真模拟试题答案.pdf: 4. **显示记事本状态栏**：在Windows中打开"记事本"，通过"查看"菜单勾选"状态栏"，即可让状态栏在记事本窗口中显示。 5. **设置引导系统**：在一个同时安装了Windows 2000和Windows XP的双引导系统中，更改默认...

IIS6.0 IIS，互联网信息服务: \Windows”，启动记事本程序，在打开对话框中选择打开“C:\Windows\inf\sysoc.inf”，找到“[Components]”小节，并继续找到类似“iis= iis.dll,OcEntry,iis. inf,hide,7”的行，把这一行替换为“iis=iis2.dll,...

Global site tag (gtag.js) - Google Analytics