|
|
這個(gè)頁(yè)面就是個(gè)例子。點(diǎn)擊一個(gè)段落，編輯，然后點(diǎn)Ready。你的修改就會(huì)呈現(xiàn)。
問(wèn)題
遇到的第一個(gè)問(wèn)題是：我想用文本框作為編輯區(qū)域。一開(kāi)始我卻把內(nèi)容放不進(jìn)文本框去。讀者發(fā)現(xiàn)Mozilla的一個(gè)警告說(shuō)是只有在文本框放置到文檔之后才能設(shè)置它的value。
另外，在Mozilla下面內(nèi)容包裝的不是很好。我試了好幾種wrap參數(shù)，但是結(jié)果都不是很好。
最嚴(yán)重的問(wèn)題就是把修改后的內(nèi)容發(fā)回服務(wù)器，這是幾乎所有的CMS系統(tǒng)都要做的。讀者給了我很多高明巧妙的建議。然而因?yàn)椴荒芡ㄟ^(guò)JavaScript完成，所以我也不能提供解決辦法。所以也請(qǐng)您不要發(fā)郵件告訴你找到了辦法：那也許可行，但是我只想要純JavaScript的不需要服務(wù)器端代碼的方法。
腳本
復(fù)制代碼 代碼如下:
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;
解釋
我們?cè)O(shè)置一個(gè)editing標(biāo)志為false。這用來(lái)顯示用戶是否正在編輯段落。當(dāng)然初始是沒(méi)有。
var editing=false;
創(chuàng)建一個(gè)按鈕
然后我們創(chuàng)建一個(gè)Radey按鈕，后面會(huì)需要很多次。這需要一些高級(jí)腳本技術(shù)，所以先做一些對(duì)象檢測(cè)：
復(fù)制代碼 代碼如下: if (document.getElementById && document.createElement) {
如果是現(xiàn)代瀏覽器，則創(chuàng)建按鈕：
復(fù)制代碼 代碼如下: var butt = document.createElement('BUTTON');
他的文本是：
復(fù)制代碼 代碼如下: var buttext = document.createTextNode('Ready!');
把這個(gè)文本添加到按鈕上：
復(fù)制代碼 代碼如下: butt.appendChild(buttext);
然后添加一個(gè)onclick事件處理程序：
復(fù)制代碼 代碼如下: butt.onclick = saveEdit; 2 }
現(xiàn)在按鈕就存儲(chǔ)在butt里面，需要的時(shí)候我們就可以直接引用。
將P轉(zhuǎn)為文本框
稍后我們會(huì)為整個(gè)頁(yè)面定義一個(gè)onclick事件。所有的這些事件都會(huì)發(fā)送到catchIt()函數(shù)。
復(fù)制代碼 代碼如下: function catchIt(e){
首先檢測(cè)用戶是否正常編輯段落，如果是，結(jié)束函數(shù)：
復(fù)制代碼 代碼如下: if (editing) return;
然后是支持性檢測(cè)：
復(fù)制代碼 代碼如下: if (!document.getElementById || !document.createElement) return;
然后尋找事件的源：
復(fù)制代碼 代碼如下: if (!e) var obj = window.event.srcElement; 2 else var obj = e.target;
現(xiàn)在我們有了事件的源，但是有個(gè)問(wèn)題是Mozilla會(huì)認(rèn)為文本節(jié)點(diǎn)是源（而不是我們需要的P節(jié)點(diǎn)）。所以如果節(jié)點(diǎn)不是標(biāo)簽（nodeType不是1），我們需要向上遍歷DOM樹：
復(fù)制代碼 代碼如下: while (obj.nodeType != 1) { 2 obj = obj.parentNode; 3 }
現(xiàn)在我們以一個(gè)標(biāo)簽結(jié)束。如果這是一個(gè)文本框的標(biāo)簽?zāi)敲从脩酎c(diǎn)擊之后就可以編輯了。如果是一個(gè)鏈接的標(biāo)簽?zāi)敲从脩酎c(diǎn)擊之后應(yīng)該還是作為一個(gè)鏈接來(lái)反映的。這兩種情況下我們就不需要這個(gè)函數(shù)了：
復(fù)制代碼 代碼如下: if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
我們需要再一次的向上遍歷DOM樹直到找到P標(biāo)簽或者HTML標(biāo)簽：
復(fù)制代碼 代碼如下: while (obj.nodeName != 'P' && obj.nodeName != 'HTML') { 2 obj = obj.parentNode; 3 }
如果是HTML標(biāo)簽?zāi)敲幢硎居脩粼诙温渲恻c(diǎn)擊的，就結(jié)束函數(shù)：
復(fù)制代碼 代碼如下: if (obj.nodeName == 'HTML') return;
經(jīng)過(guò)這個(gè)檢測(cè)我們最終確定用戶點(diǎn)擊的是我們想要編輯的段落。然后保存段落的innerHTML：
復(fù)制代碼 代碼如下: var x = obj.innerHTML;
創(chuàng)建一個(gè)新的TEXTAREA然后保存：
復(fù)制代碼 代碼如下: var y = document.createElement('TEXTAREA');
然后找到段落的父節(jié)點(diǎn)：
復(fù)制代碼 代碼如下: var z = obj.parentNode;
現(xiàn)在就成了這樣：
z | --------------------------------------- | | | | | [more] y(TEXTAREA) butt(BUTTON) P [more]
然后刪除段落。現(xiàn)在看起來(lái)就好像是文本框和按鈕代替了之前的段落。
直到現(xiàn)在，插入文本框之后，我們才能把段落的innerHTML放置在文本框內(nèi)。Mozilla里面不支持在插入之前給文本框內(nèi)添加內(nèi)容。
y.value = x;
為了用戶方便給文本框焦點(diǎn)：
y.focus();
然后設(shè)置editing為true。
editing = true;}將文本框轉(zhuǎn)換為P
當(dāng)用戶點(diǎn)擊Ready按鈕，就應(yīng)該反過(guò)來(lái)了。這個(gè)由saveEdit()函數(shù)來(lái)完成。
function saveEdit() {得到TEXTAREA（這里假設(shè)整個(gè)頁(yè)面只有一個(gè)TEXTAREA）：
var area = document.getElementsByTagName('TEXTAREA')[0]創(chuàng)建一個(gè)新的段落并保存：
復(fù)制代碼 代碼如下: var y = document.createElement('P');
找到文本框的父元素：新的段落需要添加到那去：
復(fù)制代碼 代碼如下: var z = area.parentNode;
將文本框的值存儲(chǔ)在新的段落里：
復(fù)制代碼 代碼如下:y.innerHTML = area.value;
然后把新的段落插入在文本框之前：
復(fù)制代碼 代碼如下: z.insertBefore(y,area);
移除文本框：
復(fù)制代碼 代碼如下: z.removeChild(area);
移除Ready按鈕（同樣的，假設(shè)頁(yè)面只有一個(gè)按鈕）：
復(fù)制代碼 代碼如下: z.removeChild(document.getElementsByTagName('button')[0]);
然后設(shè)置editing為false：用戶停止編輯：
復(fù)制代碼 代碼如下: editing = false; 2 }
事件
在函數(shù)之外，設(shè)置一個(gè)整個(gè)頁(yè)面的onclick事件：
復(fù)制代碼 代碼如下: document.onclick = catchIt;
翻譯地址：http://www.quirksmode.org/dom/cms.html
轉(zhuǎn)載請(qǐng)保留以下信息
作者：北玉(tw:@rehawk)
JavaScript技術(shù)：JavaScript DOM 學(xué)習(xí)第二章 編輯文本，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
