如何添加多可编辑文本框并转换为可切换显示的Text Field（仿Notion）

核心思路 #

• 用contenteditable="true"的div实现类Notion的可编辑文本框，比原生input更贴近富文本编辑体验
• 监听回车键事件（排除Shift+Enter换行场景），自动新建可编辑文本框
• 绑定快捷键切换文本框的折叠/展开状态，同时支持点击折叠框快速展开

完整代码实现 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类Notion可折叠文本框</title>
    <style>
        .editable-box {
            padding: 8px 12px;
            margin: 8px 0;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            min-height: 24px;
            cursor: text;
            transition: all 0.2s ease;
        }
        .editable-box:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }
        .editable-box.collapsed {
            padding: 8px 12px;
            background-color: #f3f4f6;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .editable-box.collapsed::before {
            content: "▶ ";
            font-size: 14px;
            margin-right: 4px;
        }
        .editable-box.expanded::before {
            content: "▼ ";
            font-size: 14px;
            margin-right: 4px;
        }
        .container {
            max-width: 600px;
            margin: 20px auto;
            padding: 0 20px;
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <div class="editable-box expanded" contenteditable="true"></div>
    </div>

    <script>
        const container = document.getElementById('container');

        // 监听键盘事件
        container.addEventListener('keydown', (e) => {
            const target = e.target;
            // 回车键新建文本框（Shift+Enter保留换行）
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                const newBox = createEditableBox();
                newBox.focus();
            }

            // Ctrl/Cmd + Shift + H 切换折叠状态
            if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'H') {
                e.preventDefault();
                toggleCollapse(target);
            }
        });

        // 点击折叠框展开并聚焦
        container.addEventListener('click', (e) => {
            const target = e.target;
            if (target.classList.contains('collapsed')) {
                toggleCollapse(target);
                target.focus();
            }
        });

        // 创建新的可编辑文本框
        function createEditableBox() {
            const box = document.createElement('div');
            box.className = 'editable-box expanded';
            box.contentEditable = true;
            container.appendChild(box);
            return box;
        }

        // 切换折叠/展开状态
        function toggleCollapse(box) {
            if (box.classList.contains('collapsed')) {
                box.classList.replace('collapsed', 'expanded');
                box.contentEditable = true;
            } else {
                box.classList.replace('expanded', 'collapsed');
                box.contentEditable = false;
            }
        }
    </script>
</body>
</html>

功能说明 #

• 点击编辑：所有展开状态的文本框点击后直接进入编辑模式
• 回车新建：在文本框中按Enter键（不按Shift）自动新建文本框并聚焦
• 快捷键折叠：选中文本框后，按Ctrl/Cmd + Shift + H切换折叠/展开
• 点击展开：折叠状态的文本框点击后立即展开并进入编辑模式

自定义调整 #

• 快捷键修改：替换(e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'H'为你需要的按键组合
• 样式定制：调整.editable-box系列样式的边框、背景色、折叠图标，匹配Notion风格

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