JavaScript DOM 学习第二章 编辑文本


Posted in Javascript onFebruary 19, 2010

例子
这个页面就是个例子。点击一个段落,编辑,然后点Ready。你的修改就会呈现。

问题
遇到的第一个问题是:我想用文本框作为编辑区域。一开始我却把内容放不进文本框去。读者发现Mozilla的一个警告说是只有在文本框放置到文档之后才能设置它的value。
另外,在Mozilla下面内容包装的不是很好。我试了好几种wrap参数,但是结果都不是很好。
最严重的问题就是把修改后的内容发回服务器,这是几乎所有的CMS系统都要做的。读者给了我很多高明巧妙的建议。然而因为不能通过JavaScript完成,所以我也不能提供解决办法。所以也请您不要发邮件告诉你找到了办法:那也许可行,但是我只想要纯JavaScript的不需要服务器端代码的方法。

脚本

var editing = false; if (document.getElementById && document.createElement) { 
    var butt = document.createElement('BUTTON'); 
    var buttext = document.createTextNode('Ready!'); 
    butt.appendChild(buttext); 
    butt.onclick = saveEdit; 
} 
function catchIt(e) { 
    if (editing) return; 
    if (!document.getElementById || !document.createElement) return; 
    if (!e) var obj = window.event.srcElement; 
    else var obj = e.target; 
    while (obj.nodeType != 1) { 
        obj = obj.parentNode; 
    } 
    if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return; 
    while (obj.nodeName != 'P' && obj.nodeName != 'HTML') { 
        obj = obj.parentNode; 
    } 
    if (obj.nodeName == 'HTML') return; 
    var x = obj.innerHTML; 
    var y = document.createElement('TEXTAREA'); 
    var z = obj.parentNode; 
    z.insertBefore(y,obj); 
    z.insertBefore(butt,obj); 
    z.removeChild(obj); 
    y.value = x; 
    y.focus(); 
    editing = true; 
} 
function saveEdit() { 
    var area = document.getElementsByTagName('TEXTAREA')[0]; 
    var y = document.createElement('P'); 
    var z = area.parentNode; 
    y.innerHTML = area.value; 
    z.insertBefore(y,area); 
    z.removeChild(area); 
    z.removeChild(document.getElementsByTagName('button')[0]); 
    editing = false; 
} 
document.onclick = catchIt;

解释
我们设置一个editing标志为false。这用来显示用户是否正在编辑段落。当然初始是没有。

var editing=false;

创建一个按钮
然后我们创建一个Radey按钮,后面会需要很多次。这需要一些高级脚本技术,所以先做一些对象检测:

if (document.getElementById && document.createElement) {

如果是现代浏览器,则创建按钮:
var butt = document.createElement('BUTTON');

他的文本是:
var buttext = document.createTextNode('Ready!');

把这个文本添加到按钮上:
butt.appendChild(buttext);

然后添加一个onclick事件处理程序:
butt.onclick = saveEdit; 2 }

现在按钮就存储在butt里面,需要的时候我们就可以直接引用。

将P转为文本框
稍后我们会为整个页面定义一个onclick事件。所有的这些事件都会发送到catchIt()函数。

function catchIt(e){

首先检测用户是否正常编辑段落,如果是,结束函数:

if (editing) return;

然后是支持性检测:
if (!document.getElementById || !document.createElement) return;

然后寻找事件的源:
if (!e) var obj = window.event.srcElement; 2 else var obj = e.target;

现在我们有了事件的源,但是有个问题是Mozilla会认为文本节点是源(而不是我们需要的P节点)。所以如果节点不是标签(nodeType不是1),我们需要向上遍历DOM树:
while (obj.nodeType != 1) { 2 obj = obj.parentNode; 3 }

现在我们以一个标签结束。如果这是一个文本框的标签那么用户点击之后就可以编辑了。如果是一个链接的标签那么用户点击之后应该还是作为一个链接来反映的。这两种情况下我们就不需要这个函数了:
if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;

我们需要再一次的向上遍历DOM树直到找到P标签或者HTML标签:
while (obj.nodeName != 'P' && obj.nodeName != 'HTML') { 2 obj = obj.parentNode; 3 }

如果是HTML标签那么表示用户在段落之外点击的,就结束函数:
if (obj.nodeName == 'HTML') return;

经过这个检测我们最终确定用户点击的是我们想要编辑的段落。然后保存段落的innerHTML:
var x = obj.innerHTML;

创建一个新的TEXTAREA然后保存:
var y = document.createElement('TEXTAREA');

然后找到段落的父节点:
var z = obj.parentNode;

现在就成了这样:

z
            |
  ---------------------------------------
  |    |      |      |   |
 [more] y(TEXTAREA) butt(BUTTON) P  [more]

然后删除段落。现在看起来就好像是文本框和按钮代替了之前的段落。

直到现在,插入文本框之后,我们才能把段落的innerHTML放置在文本框内。Mozilla里面不支持在插入之前给文本框内添加内容。

y.value = x;

为了用户方便给文本框焦点:

y.focus();

然后设置editing为true。

editing = true;
}
将文本框转换为P
当用户点击Ready按钮,就应该反过来了。这个由saveEdit()函数来完成。
function saveEdit() {得到TEXTAREA(这里假设整个页面只有一个TEXTAREA):
    var area = document.getElementsByTagName('TEXTAREA')[0]创建一个新的段落并保存:
var y = document.createElement('P');

找到文本框的父元素:新的段落需要添加到那去:
var z = area.parentNode;

将文本框的值存储在新的段落里:
y.innerHTML = area.value;

然后把新的段落插入在文本框之前:
z.insertBefore(y,area);

移除文本框:
z.removeChild(area);

移除Ready按钮(同样的,假设页面只有一个按钮):
z.removeChild(document.getElementsByTagName('button')[0]);

然后设置editing为false:用户停止编辑:
editing = false; 2 }

事件
在函数之外,设置一个整个页面的onclick事件:
document.onclick = catchIt;

翻译地址:http://www.quirksmode.org/dom/cms.html
转载请保留以下信息
作者:北玉(tw:@rehawk)
Javascript 相关文章推荐
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
简单谈谈json跨域
Mar 13 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
Vue底层实现原理总结
Feb 17 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
react基本安装与测试示例
Apr 27 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 #Javascript
JavaScript 题型问答有答案参考
Feb 17 #Javascript
JavaScript 学习技巧
Feb 17 #Javascript
JavaScript Timer实现代码
Feb 17 #Javascript
两个比较有用的Javascript工具函数代码
Feb 17 #Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 #Javascript
JavaScript 10件让人费解的事情
Feb 15 #Javascript
You might like
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
PHP时间和日期函数详解
2015/05/08 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
半角全角相互转换的js函数
2009/10/16 Javascript
JQuery小知识
2010/10/15 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
实例浅析js的this
2016/12/11 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
typescript nodejs 依赖注入实现方法代码详解
2019/07/21 NodeJs
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
JavaScript实现Excel表格效果
2020/02/07 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
土木工程应届生自荐信
2013/09/24 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
公司人力资源的自我评价
2014/01/02 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
中专自我鉴定
2014/02/05 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
JAVA springCloud项目搭建流程
2022/05/11 Java/Android