JavaScript面向?qū)ο笮薷臉?biāo)簽頁詳解

雙擊標(biāo)簽頁組件中的li小標(biāo)簽或者section 中的文本，可以對文本進(jìn)行編輯。為了實(shí)現(xiàn)這個(gè)功能，需要先給li和section元素綁定雙擊事件，當(dāng)雙擊文本后，將文本改成一個(gè)文本框，用來輸入新的內(nèi)容，在文本框中顯示原來的文本，并默認(rèn)選定文本。當(dāng)文本框失去焦點(diǎn)，或者用戶按下回車鍵以后，輸人框中的值就會(huì)更新頁面中原來的文本。

下面我們開始進(jìn)行代碼編寫。
( 1 )在updateNode0 方法中獲取li中的span文本元素，具體代碼如下。

updateNode () {

..... (原有代碼)

this. spans = this 。main. querySelectorA1l(' .firstnav li span:first-child') ;

(2)在init()方法的for循環(huán)中給spans綁定雙擊事件，具體代碼如下。for (var i= 0; i < this.lis. length; i++)   {

..... (原有代碼)

this. spans[i] .ondblclick = function()

that. editTab(this) ;

};
}

(3)編寫editTab0方法，實(shí)現(xiàn)雙擊文本后顯示文本框的效果。先獲取原來的文本，然后將文本替換為文本框，并在文本框中放人原來的文本，具體代碼如下。

editTab(el) {

var str = el.innerHTML;

el. innerHTML'<input type-"text">';

var input = el.children[0];

input.value = str;

input.select();              // 文本框中的文本全選

}

(4)為文本框綁定失去焦點(diǎn)事件和鍵盤事件，實(shí)現(xiàn)獲取焦點(diǎn)或按回車鍵后提交修改，具體代碼如下。

editTab(el) {

.... (原有代碼)

input.onblur = function() {//離開文本框后，修改標(biāo)簽頁標(biāo)題

this.parentNode . innerHTML = this.value;

}

input.onkeyup = function(e) { // 按回車后修改標(biāo)簽頁標(biāo)題

if (e. keyCode === 13)

this.blur() ;

//觸發(fā)blur事件，完成修改

    };

 }

(5)在init(O的for循環(huán)中增加代碼，讓標(biāo)簽頁的內(nèi)容也可以修改。

for (var i = 0; i < this.lis.length; i++) {

......(原有代碼)

this. sections [i] .ondblclick = function() {

that. editTab (this) ;

   };

};

(6)通過瀏覽器訪問測試，觀察雙擊文本后是否會(huì)自動(dòng)變成一個(gè)文本框，并在文本框中顯示原來的文本。當(dāng)輸人完成后，按回車鍵，或者再單擊一下其他位置，觀察修改是否成功。