在“选项卡页面”或“文本”部分中的LI小标签进行双击,该标签可以编辑文本。
为了实现此功能,您需要首先绑定LI和部分元素的双击事件。双击文本后,将文本更改为用于输入新内容的文本框,在文本框中显示原始文本,然后按DefaultText选择默认选择。
当文本框失去焦点或用户按下汽车输入键时,丢失框中的值将从页面中的平原上更新文本。
下面我们开始代码写作:
(1)在updateNode0方法中获取li中的跨度文本元素
特定代码如下:
updateNode(){
.....(原始代码)
这。跨度=这个。主要的。querySelectora1l('.firstnav li跨度:第一儿童);
(2)在init()方法的for cycle中双击事件。特定代码如下:
for(var i = 0; i <this.lis。length; i ++){
.....(原始代码)
这。跨度[i] .ndblclick = function()
那。edittab(this);
};
}(3)编写Edittab0方法,以达到双击文本后显示文本框的效果。首先获取原始文本,然后将文本替换为文本框,然后将原始文本放入文本框中。
特定代码如下:
(4)绑定文本框的焦点和键盘事件的焦点,并在获得焦点或按Enter键后提交修改。
特定代码如下:
(5)将代码添加到初始化(o for循环以允许选项卡页面的内容对其进行修改。
代码显示如下:
(6)通过浏览器访问测试,观察文本是否会自动成为文本框后,在双击文本后,并在文本框中显示原始文本。
失败者完成后,按Enter或单击其他位置以观察修改是否成功。