本文教你使用纯前端 javascript 在 blogger 博客中快速实现一个单输入框表单：用户填写内容（如公司名）后点击“生成”，自动拼接 html 片段并显示在页面上，支持一键复制，无需后端、不依赖插件。
在 Blogger 中嵌入交互式表单（如隐私政策生成器、链接生成器、Meta 标签生成器等），完全可以通过客户端 JavaScript 实现——无需服务器、不涉及表单提交或数据库。核心思路是：监听用户输入 → 动态拼接 HTML/文本 → 渲染到指定容器 → 提供一键复制功能。
下面是一个完整、可直接部署到 Blogger 文章中的最小可行示例（仅需 1 个输入框 + 1 个按钮）：
<!-- 表单区域 -->
<label for="companyInput">请输入公司名称：</label>
<input type="text" id="companyInput" placeholder="例如：Tech Innovations Inc">
<button onclick="generateAndShow()">生成 HTML 链接</button>
<!-- 输出区域（带复制功能） -->
<div style="margin-top: 16px;">
<label>生成结果（可复制）：</label>
<pre id="outputBox" style="background:#f5f5f5; padding:12px; border-radius:4px; overflow-x:auto; font-family:monospace; font-size:14px; margin:8px 0;"></pre>
<button onclick="copyToClipboard()">? 复制到剪贴板</button>
</div>
<script>
// 1. 生成 HTML 片段（可根据需求自由定制）
function generatePassage(companyName) {
if (!companyName || !companyName.trim()) {
return '<!-- 请先输入公司名称 -->';
}
const safeName = companyName.replace(/</g, '<').replace(/>/g, '>');
return `<a href="https://www.example.com" target="_blank">${safeName}</a>`;
}
// 2. 渲染结果到页面
function generateAndShow() {
const input = document.getElementById('companyInput').value;
const output = document.getElementById('outputBox');
output.textContent = generatePassage(input); // 使用 textContent 避免 XSS（关键！）
}
// 3. 复制到剪贴板（兼容现代浏览器）
function copyToClipboard() {
const output = document.getElementById('outputBox');
const text = output.textContent;
if (!text || text.includes('请输入')) return;
navigator.clipboard.writeText(text)
.then(() => alert('✅ 已复制到剪贴板！'))
.catch(err => console.error('复制失败:', err));
}
// 4. 支持回车键触发生成（提升体验）
document.getElementById('companyInput').addEventListener('keypress', function(e) {
if (e.key === 'Enter') generateAndShow();
});
</script>✅ 关键注意事项：
- 安全第一：示例中使用 textContent（而非 innerHTML）渲染输出，可有效防止 XSS 攻击；若需渲染真实 HTML（如高亮预览），务必对用户输入做严格转义（如用 DOMPurify 库）。
- Blogger 兼容性：将上述代码粘贴到 Blogger 编辑器的「HTML 模式」下即可生效；避免在「可视化模式」中编辑，以防标签被自动过滤。
- 样式增强建议：可引入 Prism.js 或 Highlight.js 实现语法高亮（只需额外添加 CSS/JS 文件链接，并将 <pre> 改为 <pre><code class="html">）。
- 移动端适配：按钮和输入框已采用内联样式，如需响应式布局，可添加媒体查询或使用 CSS Flex。
这个方案轻量、可靠、开箱即用——无论是生成 SEO Meta 标签、Open Graph 代码，还是自定义跳转链接，你只需修改 generatePassage() 函数内的模板逻辑，即可快速构建专属工具。
立即学习“前端免费学习笔记（深入）”；
