欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript DOM 學(xué)習(xí)第二章 編輯文本

 更新時(shí)間：2010年02月19日 13:15:13   作者：  
在這一章我會(huì)給出一個(gè)在CMS里非常有用的更新頁(yè)面的代碼。在任一段落點(diǎn)擊鼠標(biāo)你就可以修改了。完成以后點(diǎn)擊按鈕，修改的文本就顯示了。
例子
這個(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樹(shù)：

復(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樹(shù)直到找到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]

然后刪除段落?，F(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)

相關(guān)文章

最新評(píng)論