应使用contenteditable配合正则解析实现话题输入，允许自由输入，提交/失焦时用/#\w+/g提取合法标签，过滤非法字符与边界标点，粘贴时拦截并清理隐藏格式符，避免劫持keydown破坏输入法体验。
怎么用 input 实现带 # 的话题输入（不是纯文本）
不能直接靠 input[type="text"] 拦截用户输“#”再自动加空格或校验——这样会破坏输入法体验，尤其中文拼音输入时，“#”常是候选词前缀（如搜“#科技”时，#可能被提前触发）。真实可行的做法是：允许自由输入，但提交/失焦时做结构化解析，把形如 #xxx 的连续片段识别为独立标签。
关键点：
- 不劫持
keydown或input事件去“阻止”或“重写”用户输入 - 用正则
/#[^\s#]+/g提取合法话题（排除##、#、#单独出现） - 注意边界：话题末尾带标点（如
#前端.）要截掉非字母数字下划线字符
contenteditable + 自定义渲染比 input 更可控？
当需要实时高亮、删除单个话题、光标精准停在标签之间时，contenteditable 是更合理的选择。但它不是“换个标签就行”，得手动管理 DOM 结构和光标位置。
典型结构：
<div contenteditable="true" class="topic-input"> <span class="topic">#React</span> <span class="topic">#TypeScript</span> <span class="placeholder">输入话题，用空格或回车分隔</span> </div>
要点：
- 每次输入后用
getSelection()+range.startContainer判断光标是否落在span.topic内，避免误删整块 - 回车/空格键触发新标签创建，但需
event.preventDefault()阻止默认换行或插入空格 - 粘贴内容必须用
paste事件拦截，用document.execCommand('insertText')替代原生插入，否则会把 HTML 标签直接塞进去
为什么 input 的 setSelectionRange 在 iOS 上经常失效
iOS Safari 对 input 元素的光标控制极其保守。哪怕你调用 input.setSelectionRange(0, 0)，只要焦点刚获得、或输入法正在激活，它大概率被忽略。
避坑方式：
- 不要依赖
setSelectionRange去“修正”用户光标位置——它只适合极简场景（如清空后强制定位到开头） - 如果必须响应话题删除，优先用
blur+ 重新聚焦 +setTimeout(..., 0)延迟调用setSelectionRange - 更稳的方案是放弃
input，改用contenteditable+focus()后用range.selectNodeContents(container)定位到末尾
提交前校验：哪些 #xxx 算无效话题
用户可能输 #123、#_、#a-b、#中文，但后端通常只接受字母数字下划线且长度 2–20。前端校验不能只看“有没有#”，得匹配语义规则。
推荐正则：/^#[a-zA-Z0-9_][a-zA-Z0-9_\-]*[a-zA-Z0-9_]$/
说明：
- 开头必须是
#，后面第一个字符不能是连字符或下划线（防#-abc） - 结尾不能是连字符或下划线（防
#abc-） - 允许中间出现连字符（
#open-source合法），但不允许连续两个（#a--b非法） - 中文话题（
#前端）需后端支持 Unicode 字符集，前端正则可加\u4e00-\u9fa5，但要注意 iOS 输入法可能插入零宽空格，得先.replace(/\u200b/g, '')
最常被忽略的是：用户复制粘贴时带隐藏格式字符（如 Word 里的软回车、全角空格），这些不会显示，但会让正则匹配失败。务必在解析前统一清理 .replace(/[\u2000-\u200F\u2028\u2029\u202F\u2060\ufeff]/g, '')。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
