更新時(shí)間:2021-08-18 來源:黑馬程序員 瀏覽量:
雙擊標(biāo)簽頁組件中的li小標(biāo)簽或者section 中的文本,可以對(duì)文本進(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)通過瀏覽器訪問測(cè)試,觀察雙擊文本后是否會(huì)自動(dòng)變成一個(gè)文本框,并在文本框中顯示原來的文本。當(dāng)輸人完成后,按回車鍵,或者再單擊一下其他位置,觀察修改是否成功。
JavaScript中怎樣創(chuàng)建Date對(duì)象?