如何创建一个逐字符包裹在中的可编辑自定义元素-js教程-PHP中文网

如何创建一个逐字符包裹在 <span> 中的可编辑自定义元素中的可编辑自定义元素 " />

本文介绍如何实现一个 contenteditable 的自定义，使其将用户输入的每个字符动态生成独立元素，并支持样式控制（如对错高亮）、渐入动画及正确光标行为。

本文介绍如何实现一个 `contenteditable` 的自定义 `

`，使其将用户输入的每个字符动态生成独立 `` 元素，并支持样式控制（如对错高亮）、渐入动画及正确光标行为。

要构建一个真正可控、面向教学/打字训练场景的「类 textarea」输入区域，直接使用原生 <textarea></textarea> 无法满足逐字符样式定制（如单字符红/绿/删除线）和 CSS 动画需求。因此，最佳实践是采用 contenteditable="true" 的 <div>，并<strong>完全接管输入逻辑</strong>——不依赖其默认文本渲染，而是将输入内容拆解为字符数组，逐个创建带样式的 <code><span></span> 插入 DOM。

以下是一个完整、健壮的实现方案：

✅ 核心要点说明

使用 contenteditable="true" 提供基础编辑能力（聚焦、光标、粘贴等），但禁用默认文本渲染（通过 innerHTML = '' 清空）；
监听 input 事件捕获新增字符（event.data 在插入单字符时可靠；粘贴时需额外处理）；
单独监听 keydown 捕获 Backspace 和 Delete，手动维护文本状态，避免光标错位；
每次更新后，重建所有 <span></span>：确保 DOM 与逻辑状态严格一致，规避 contenteditable 的不可预测性；
为每个 <span></span> 添加 fade-in 类实现 0.25s 渐显动画，配合 animation-fill-mode: forwards 保持最终透明度。

? 完整代码示例

<div id="typableCustomDiv" class="typableCustomDiv" contenteditable="true"></div>

.typableCustomDiv {
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 18px;
  display: inline-block;
  min-height: 1.5rem;
  line-height: 1.5;
  outline: none; /* 避免双层焦点框 */
}

.correct {
  color: #28a745;
}

.incorrect {
  text-decoration: line-through;
  color: #dc3545;
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.25s ease forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

const container = document.getElementById('typableCustomDiv');
let inputText = '';

// 清除默认输入行为，仅保留光标与焦点
container.addEventListener('input', handleInput);
container.addEventListener('keydown', handleKeyDown);

function handleInput(e) {
  // event.data 存在时为单字符输入（键入、粘贴首字符等）
  if (e.data) {
    inputText += e.data;
  } else if (e.inputType === 'insertFromPaste') {
    // 粘贴场景：读取剪贴板并追加（简化版，生产环境建议用 async clipboard API）
    setTimeout(() => {
      const pasteText = container.innerText || '';
      inputText += pasteText;
      updateDisplayedContent();
    }, 0);
  }
  updateDisplayedContent();
}

function handleKeyDown(e) {
  if (e.key === 'Backspace' || e.key === 'Delete') {
    if (e.key === 'Backspace' && inputText.length > 0) {
      inputText = inputText.slice(0, -1);
    } else if (e.key === 'Delete') {
      // 可扩展：删除光标后字符（需结合 Selection API）
      // 此处简化为仅支持 Backspace
    }
    updateDisplayedContent();
    e.preventDefault(); // 阻止默认删除行为
  }
}

function updateDisplayedContent() {
  container.innerHTML = ''; // 彻底清空，避免残留节点

  for (let i = 0; i < inputText.length; i++) {
    const span = document.createElement('span');
    span.textContent = inputText[i];

    // 示例逻辑：每第 3 个字符为错误（实际应对接题目答案校验）
    const isIncorrect = i % 3 === 0;

    span.classList.add('fade-in');
    if (isIncorrect) {
      span.classList.add('incorrect');
    } else {
      span.classList.add('correct');
    }

    container.appendChild(span);
  }
}

⚠️ 注意事项与进阶建议

光标位置管理：本方案中光标始终位于末尾（因每次重建 DOM）。若需支持中间编辑，必须集成 Selection + Range API 记录/恢复光标，复杂度显著上升；
粘贴兼容性：event.data 对粘贴不生效，需用 setTimeout 延迟读取 innerText 或使用现代 navigator.clipboard.readText()；
性能优化：千级字符以上建议虚拟滚动或节流 updateDisplayedContent；
无障碍支持：为 <div contenteditable> 添加 <code>role="textbox" 和 aria-label，提升屏幕阅读器体验；
样式隔离：若嵌入复杂布局，建议用 display: inline-flex 替代 inline-block，并设置 flex-wrap: wrap 防止换行错乱。