实现一个函数 双击编辑

推荐答案

// www.javascriptcn.com code example
function doubleClickToEdit(element) {
    let isEditing = false;
    let originalContent = '';

    element.addEventListener('dblclick', function() {
        if (isEditing) return;

        isEditing = true;
        originalContent = element.innerText;

        const input = document.createElement('input');
        input.type = 'text';
        input.value = originalContent;

        element.innerText = '';
        element.appendChild(input);
        input.focus();

        input.addEventListener('blur', function() {
            element.innerText = input.value;
            isEditing = false;
        });

        input.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                element.innerText = input.value;
                isEditing = false;
            }
        });
    });
}

// 使用示例
const editableElement = document.getElementById('editable');
doubleClickToEdit(editableElement);

本题详细解读

1. 功能描述

该函数 doubleClickToEdit 实现了一个双击编辑的功能。当用户双击某个元素时，该元素的内容会变成一个可编辑的输入框，用户可以在输入框中修改内容。当用户按下回车键或输入框失去焦点时，输入框的内容会更新到元素中。

2. 实现思路

• 事件监听：通过 addEventListener 监听元素的 dblclick 事件，当用户双击元素时触发编辑功能。
• 创建输入框：在双击事件触发时，创建一个 input 元素，并将其插入到当前元素中，同时将当前元素的内容清空。
• 保存原始内容：在进入编辑模式前，保存当前元素的原始内容，以便在用户取消编辑时恢复。
• 退出编辑模式：通过监听 blur 事件（输入框失去焦点）和 keydown 事件（按下回车键）来退出编辑模式，并将输入框的内容更新到元素中。

3. 代码细节

• isEditing 标志：用于防止用户在编辑模式下再次双击触发编辑功能。
• originalContent 变量：保存元素的原始内容，以便在用户取消编辑时恢复。
• input.focus()：在创建输入框后立即聚焦，使用户可以直接输入内容。
• keydown 事件：监听回车键，按下回车键时保存输入框的内容并退出编辑模式。

4. 使用示例

• 在 HTML 中，给需要双击编辑的元素添加一个唯一的 ID，例如 editable。
• 在 JavaScript 中，调用 doubleClickToEdit 函数，并将该元素作为参数传入。

<div id="editable">双击我进行编辑</div>

const editableElement = document.getElementById('editable');
doubleClickToEdit(editableElement);

通过这种方式，用户可以在页面上双击指定的元素进行内容编辑。