时间:2021-05-28
例子
这个页面就是个例子。点击一个段落,编辑,然后点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声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本节引言告别了章,迎来第二章——Android中的UI(UserInterface)组件的详解,而本节我们要学习的是所有控件的父类View和ViewGroup类
《外贸来函电》这门课程有十一章自内容,包括:bai第一章商务信函的格式、du第二章商务信函的写作原则、第三章建立dao业务关系、第四章询盘、第五章报盘、第六章C
第二章:集合的使用我们经常会用到各种集合,数字的,字符串的还有对象的。它们无处不在,哪怕操作集合的代码要能稍微优化一点,都能让代码清晰很多。在这章中,我们探索下
我很郁闷,这本书果然讲得很详细,我在看第二章,看完要深呼吸,实在太详(lao)细(dao)了。不过这很好,后面难一些的内容应该会不错~那么,这章只是作为预览的章
前言第一章国际贸易导论第一节国际贸易基础知识第二节国际贸易合同第三节贸易术语习题第二章现代物流管理概述第一节现代物流概念及其分类、作用第二节物流学说第三节第三方