源码网商城，靠谱的源码在线交易网站我的订单购物车帮助

当前位置：首页 > 资讯 > 技术文档

JavaScript DOM 学习第二章编辑文本

时间：2022-04-04 21:29 编辑：来源：阅读：
扫一扫，手机访问

摘要：JavaScript DOM 学习第二章编辑文本

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

[u]复制代码[/u] 代码如下:

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按钮，后面会需要很多次。这需要一些高级脚本技术，所以先做一些对象检测：

[u]复制代码[/u] 代码如下:

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

如果是现代浏览器，则创建按钮：

[u]复制代码[/u] 代码如下:

var butt = document.createElement('BUTTON');

他的文本是：

[u]复制代码[/u] 代码如下:

var buttext = document.createTextNode('Ready!');

把这个文本添加到按钮上：

[u]复制代码[/u] 代码如下:

butt.appendChild(buttext);

然后添加一个onclick事件处理程序：

[u]复制代码[/u] 代码如下:

butt.onclick = saveEdit; 2 }

现在按钮就存储在butt里面，需要的时候我们就可以直接引用。将P转为文本框稍后我们会为整个页面定义一个onclick事件。所有的这些事件都会发送到catchIt()函数。

[u]复制代码[/u] 代码如下:

function catchIt(e){

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

[u]复制代码[/u] 代码如下:

if (editing) return;

然后是支持性检测：

[u]复制代码[/u] 代码如下:

if (!document.getElementById || !document.createElement) return;

然后寻找事件的源：

[u]复制代码[/u] 代码如下:

if (!e) var obj = window.event.srcElement; 2 else var obj = e.target;

现在我们有了事件的源，但是有个问题是Mozilla会认为文本节点是源（而不是我们需要的P节点）。所以如果节点不是标签（nodeType不是1），我们需要向上遍历DOM树：

[u]复制代码[/u] 代码如下:

while (obj.nodeType != 1) { 2 obj = obj.parentNode; 3 }

现在我们以一个标签结束。如果这是一个文本框的标签那么用户点击之后就可以编辑了。如果是一个链接的标签那么用户点击之后应该还是作为一个链接来反映的。这两种情况下我们就不需要这个函数了：

[u]复制代码[/u] 代码如下:

if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;

我们需要再一次的向上遍历DOM树直到找到P标签或者HTML标签：

[u]复制代码[/u] 代码如下:

 while (obj.nodeName != 'P' && obj.nodeName != 'HTML') { 2 obj = obj.parentNode; 3 } 

如果是HTML标签那么表示用户在段落之外点击的，就结束函数：

[u]复制代码[/u] 代码如下:

if (obj.nodeName == 'HTML') return;

经过这个检测我们最终确定用户点击的是我们想要编辑的段落。然后保存段落的innerHTML：

[u]复制代码[/u] 代码如下:

var x = obj.innerHTML;

创建一个新的TEXTAREA然后保存：

[u]复制代码[/u] 代码如下:

var y = document.createElement('TEXTAREA');

然后找到段落的父节点：

[u]复制代码[/u] 代码如下:

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]创建一个新的段落并保存：

[u]复制代码[/u] 代码如下:

var y = document.createElement('P');

找到文本框的父元素：新的段落需要添加到那去：

[u]复制代码[/u] 代码如下:

var z = area.parentNode;

将文本框的值存储在新的段落里：

[u]复制代码[/u] 代码如下:

y.innerHTML = area.value;

然后把新的段落插入在文本框之前：

[u]复制代码[/u] 代码如下:

z.insertBefore(y,area);

移除文本框：

[u]复制代码[/u] 代码如下:

z.removeChild(area);

移除Ready按钮（同样的，假设页面只有一个按钮）：

[u]复制代码[/u] 代码如下:

z.removeChild(document.getElementsByTagName('button')[0]);

然后设置editing为false：用户停止编辑：

[u]复制代码[/u] 代码如下:

editing = false; 2 }

事件在函数之外，设置一个整个页面的onclick事件：

[u]复制代码[/u] 代码如下:

document.onclick = catchIt;

翻译地址：http://www.quirksmode.org/dom/cms.html 转载请保留以下信息作者：北玉(tw:@rehawk)

全部评论(0)

上一篇：各种浏览器兼容问题
下一篇：JavaScript设计模式开发中组合模式的使用教程

资讯排行榜
更多>>

关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2 苏公网安备32050702011978号增值电信业务经营许可证编号：苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部