纯原生html+少量js即可实现按钮向textarea插入固定文本模板，核心是通过data-template存模板、onclick调用通用函数操作value，并处理光标、焦点及xss等细节。
点击按钮直接向 <textarea></textarea> 插入固定文本模板
不用 JavaScript 框架，纯原生 HTML + 少量 JS 就能实现。核心是给按钮绑定 onclick 事件，操作 textarea 的 value 或 innerHTML（注意：后者对 <textarea></textarea> 无效，只能用 value）。
- 模板内容建议写在按钮的
data-template属性里，避免内联脚本污染 HTML 结构 - 若要保留光标位置并支持“追加”而非覆盖，需用
selectionStart/selectionEnd配合字符串拼接 - 换行符必须用
\n（不是<br>
），否则在<textarea></textarea>中显示为文字 “<br>”
多个按钮对应不同模板时如何避免重复写 JS
用一个通用函数处理所有按钮，靠 data-target 指定目标 textarea，靠 data-template 提供内容。这样增删按钮只需改 HTML，不碰 JS。
function insertTemplate(btn) {
const targetId = btn.dataset.target;
const template = btn.dataset.template;
const el = document.getElementById(targetId);
if (el && el.tagName === 'TEXTAREA') {
el.value = template;
}
}
-
btn.dataset.target值应与<textarea id="xxx"></textarea>的id一致 - 中文、特殊符号、单双引号都可直接放在
data-template里，浏览器会自动解码 - 如果模板含变量占位符（如
{{name}}），需额外用String.replace()处理，不在基础场景内
模板中需要插入当前时间或用户输入怎么办
静态模板不够用时，得在 JS 里动态生成内容。比如插入 ISO 格式时间：new Date().toISOString().slice(0,19)；或者读取另一个 <input> 的值拼进去。
- 动态部分不能塞进
data-template，必须在 JS 函数里构造字符串 - 注意 XSS 风险：若拼接用户输入内容，务必先做
textContent转义或白名单过滤，别直接用innerHTML - 时间格式推荐用
toLocaleString()而非手动拼接，更易本地化
移动端点按无响应或光标错位的常见原因
iOS Safari 和部分安卓 WebView 对 textarea 的焦点控制较严格，点按钮后光标可能没落到框里，导致后续输入位置异常。
- 插入模板后立即调用
el.focus()，但某些系统需加setTimeout延迟 0ms 才生效 - 不要用
el.select()，它会全选内容，干扰用户编辑意图 - 如果页面用了
user-scalable=no或禁用缩放，某些旧版 iOS 会抑制焦点行为，得检查 viewport 设置
模板填入本身很简单，难的是让每次点击都自然、可控、不打断用户当前操作节奏——光标位置、焦点状态、内容覆盖逻辑，这些细节堆起来才是实际体验的分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
