HTML怎么做提及输入框_html @提及人员输入框实现【建议收藏】-html教程-PHP中文网

必须用 contenteditable 元素配合 javascript 的 range/selection api 实现 @ 提及，通过 compositionend 监听中文输入、deletecontents + insertnode 插入带 data-mention-id 的 span 节点，并设置 user-select: text 保证可选中。

html怎么做提及输入框_html @提及人员输入框实现【建议收藏】

如何用原生 HTML + JavaScript 实现 @ 提及输入框

纯 HTML 无法实现 @ 提及功能，必须配合 JavaScript 监听输入、解析光标位置、匹配关键词并插入带标识的节点。核心难点不在“显示 @”，而在“不破坏光标位置”和“避免内容被转义”。

常见错误现象：contenteditable 容器里直接 innerHTML += '@xxx' 会导致光标跳到末尾；用 input 元素则无法嵌入可点击的标签（如 <span class="mention">@张三</span>）。

必须使用 contenteditable="true" 的 div 或 span，不能用 <input> 或 <textarea></textarea>
监听 input 和 keydown（尤其 Enter、Space、Tab），检测是否刚输入了 @ 后跟字母/中文
匹配后不要用 innerText 赋值，要用 document.execCommand('insertHTML', false, ...)（旧但兼容）或 Range + Selection API（推荐）还原光标
提及项建议用 <span data-mention-id="123" class="mention">@张三</span>，方便后续提交时提取 ID 而非仅文本

为什么不能只靠 CSS + HTML 模拟 @ 效果

有人尝试用两个层叠 div：底层放纯文本，上层用绝对定位盖一个“伪提及标签”。这在视觉上可行，但会彻底丢失用户交互能力——无法选中、无法复制、无法触发 focus 或 click，更无法与后端做语义化关联。

真正可用的提及必须是 DOM 节点，且保留在编辑流中。否则：getSelection().toString() 拿不到完整内容，Ctrl+A 会漏掉提及块，粘贴到其他地方也会丢失样式和数据。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

`Range` 和 `Selection` 怎么安全插入提及节点

这是最易出错的一环。直接 element.innerHTML = ... 会重置光标；用 appendChild 会插到末尾。正确做法是：

const selection = window.getSelection();
const range = selection.getRangeAt(0);
const mentionNode = document.createElement('span');
mentionNode.className = 'mention';
mentionNode.dataset.mentionId = '123';
mentionNode.textContent = '@张三';
range.deleteContents(); // 删除当前选区（比如刚输的 @zhang）
range.insertNode(mentionNode); // 插入节点
range.collapse(false); // 光标落在提及节点之后

注意：range.collapse(false) 中的 false 表示光标落在节点末尾（true 是开头），否则用户继续打字会插在 @ 前面。