使用JavaScript为<li>元素添加文本编辑功能

嘿，我明白你遇到的困扰了——点击列表项想修改它的文本，但失焦保存的时候功能出问题对吧？让我先帮你分析原代码里的几个关键问题，再给你调整好的可运行代码。

原代码的核心问题 #

1. 全局变量导致元素指向错误：saveText函数里直接用的li是循环最后一次的变量，根本不是你点击的那个列表项，所以保存时会修改错误的元素。
2. 输入框位置不合理：每次创建的输入框都被加到body末尾，用户很难关联到自己正在编辑的列表项，体验很差。
3. 没有防重复编辑机制：多次点击同一个<li>会创建多个输入框，造成混乱。

修复后的完整代码 #

// 初始化列表
const arr = ["one", "two", "three"];
const ul = document.createElement("ul");
document.body.appendChild(ul);

for (let i = 0; i < arr.length; i++) {
    const li = document.createElement("li");
    li.addEventListener("click", changeText);
    li.textContent = arr[i]; // 用textContent更安全，避免HTML注入
    ul.appendChild(li);
}

function changeText() {
    // 防止重复点击创建多个输入框
    if (this.querySelector('input')) return;

    const currentLi = this;
    const input = document.createElement("input");
    input.value = currentLi.textContent.trim();

    // 把输入框放到当前li内部，替换原有文本
    currentLi.innerHTML = '';
    currentLi.appendChild(input);

    // 自动聚焦，提升体验
    input.focus();

    // 绑定失焦保存事件，传递当前li和输入框
    input.addEventListener("blur", () => saveText(currentLi, input));
}

function saveText(li, input) {
    // 处理空输入的情况，避免li变成空白
    const newText = input.value.trim() || '未输入内容';
    li.textContent = newText;
}

关键修改点说明 #

• 调整列表结构：把<ul>的创建移到循环外部，让所有<li>都属于同一个列表，符合常规页面结构。
• 用let替代var：避免循环变量的闭包陷阱，虽然这里不影响功能，但这是现代JS的好习惯。
• 输入框嵌入当前列表项：用户点击哪个<li>，输入框就出现在哪个<li>里，直观清晰。
• 明确元素关联：通过闭包把当前<li>和输入框传递给saveText，确保保存时修改的是正确的元素。
• 防重复编辑：点击已处于编辑状态的<li>不会重复创建输入框。
• 安全处理文本：用textContent替代innerHTML，避免用户输入HTML代码导致的页面异常。
• 优化用户体验：输入框自动聚焦，同时处理空输入的情况。

内容的提问来源于stack exchange，提问作者Marie