更新時間:2021年08月18日09時45分 來源:傳智教育 瀏覽次數(shù):
雙擊標(biāo)簽頁組件中的li小標(biāo)簽或者section 中的文本,可以對文本進行編輯。為了實現(xiàn)這個功能,需要先給li和section元素綁定雙擊事件,當(dāng)雙擊文本后,將文本改成一個文本框,用來輸入新的內(nèi)容,在文本框中顯示原來的文本,并默認選定文本。當(dāng)文本框失去焦點,或者用戶按下回車鍵以后,輸人框中的值就會更新頁面中原來的文本。
下面我們開始進行代碼編寫。
( 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方法,實現(xiàn)雙擊文本后顯示文本框的效果。先獲取原來的文本,然后將文本替換為文本框,并在文本框中放人原來的文本,具體代碼如下。
editTab(el) { var str = el.innerHTML; el. innerHTML'<input type-"text">'; var input = el.children[0]; input.value = str; input.select(); // 文本框中的文本全選 }
(4)為文本框綁定失去焦點事件和鍵盤事件,實現(xià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)通過瀏覽器訪問測試,觀察雙擊文本后是否會自動變成一個文本框,并在文本框中顯示原來的文本。當(dāng)輸人完成后,按回車鍵,或者再單擊一下其他位置,觀察修改是否成功。
猜你喜歡:
使用JavaScript變量需要注意哪些語法細節(jié)?