|
|
這個頁面就是個例子。點擊一個段落，編輯，然后點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技術：JavaScript DOM 學習第二章 編輯文本，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
