HTML中input标签实现点击按钮复制输入框内容的功能-html教程-PHP中文网

核心是读取input.value并调用navigator.clipboard.writetext()，需确保安全上下文（https/localhost）和用户click手势触发，避免在异步回调中调用，复制前校验value非空并提供错误提示与视觉反馈。

html中input标签实现点击按钮复制输入框内容的功能

点击按钮复制 input 的 value 值，核心是读取 `value` 并调用 `navigator.clipboard.writeText()`

现代浏览器中，复制文本最可靠的方式是使用 navigator.clipboard.writeText()，它直接写入系统剪贴板。但这个 API 要求页面处于安全上下文（https 或 localhost），且必须由用户手势（如 click）触发——不能在异步回调或定时器里调用，否则会报 "writeText() failed: Document is not focused" 或权限拒绝错误。

常见错误是直接对 input 元素调用 .select() 后用 document.execCommand('copy')，这个方法已废弃，在 Chrome 90+ 和新版 Safari 中默认禁用，且不返回 Promise，无法判断是否成功。

实操建议：

确保 input 有 id 或能被 JS 精确选中（比如 document.querySelector('input[name="token"]')）
绑定 click 事件到按钮，**不要**用 onchange 或 input 事件触发复制
复制前检查 input.value 是否为空，避免复制空白字符串
捕获 writeText() 的 Promise rejection，例如网络策略拦截、用户拒绝权限时给出提示

完整 HTML + 内联 JS 示例（无框架依赖）

以下代码可直接保存为 copy.html 在本地双击运行（Chrome/Firefox 支持 file:// 下的 clipboard API）：

<input type="text" id="myInput" value="Hello World"><button onclick="copyToClipboard('myInput')">复制</button>

<script>
function copyToClipboard(inputId) {
  const input = document.getElementById(inputId);
  if (!input || !input.value.trim()) return;

  navigator.clipboard.writeText(input.value)
    .then(() => console.log('已复制：' + input.value))
    .catch(err => console.error('复制失败：', err));
}
</script>

注意：onclick 是最简写法，生产环境建议用 addEventListener 分离结构与行为；input.value.trim() 防止只复制空格；console.error 输出的 err 通常是 NotAllowedError（未由用户手势触发）或 SecurityError（非安全上下文）。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载