首页技术文章正文

JavaScript面向对象修改标签页详解

更新时间:2021-08-18 来源:黑马程序员 浏览量:

好口碑IT培训

双击标签页组件中的li小标签或者section 中的文本,可以对文本进行编辑。为了实现这个功能,需要先给li和section元素绑定双击事件,当双击文本后,将文本改成一个文本框,用来输入新的内容,在文本框中显示原来的文本,并默认选定文本。当文本框失去焦点,或者用户按下回车键以后,输人框中的值就会更新页面中原来的文本。

下面我们开始进行代码编写。
( 1 )在updateNode0 方法中获取li中的span文本元素,具体代码如下。

updateNode () {

..... (原有代码)

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

(2)在init()方法的for循环中给spans绑定双击事件,具体代码如下。for (var i= 0; i < this.lis. length; i++)   {

..... (原有代码)

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

that. editTab(this) ;

};
}

(3)编写editTab0方法,实现双击文本后显示文本框的效果。先获取原来的文本,然后将文本替换为文本框,并在文本框中放人原来的文本,具体代码如下。

editTab(el) {

var str = el.innerHTML;

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

var input = el.children[0];

input.value = str;

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

}

(4)为文本框绑定失去焦点事件和键盘事件,实现获取焦点或按回车键后提交修改,具体代码如下。

editTab(el) {

.... (原有代码)

input.onblur = function() {//离开文本框后,修改标签页标题

this.parentNode . innerHTML = this.value;

}

input.onkeyup = function(e) { // 按回车后修改标签页标题

if (e. keyCode === 13)

this.blur() ;

//触发blur事件,完成修改

    };

 }

(5)在init(O的for循环中增加代码,让标签页的内容也可以修改。

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

......(原有代码)

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

that. editTab (this) ;

   };

};

(6)通过浏览器访问测试,观察双击文本后是否会自动变成一个文本框,并在文本框中显示原来的文本。当输人完成后,按回车键,或者再单击一下其他位置,观察修改是否成功。







猜你喜欢:

JS中的对象是什么?它有哪些属性和变量?

JavaScript中怎样创建Date对象?

JavaScript执行机制详细介绍

JavaScript中修改元素内容怎样操作?

黑马程序员web前端培训课程

分享到:
在线咨询 我要报名
和我们在线交谈!