html原生不支持一键复制，需通过按钮触发：旧方案用document.execcommand('copy')配合临时；新方案用navigator.clipboard.writetext()（需https、用户手势触发），两者均需校验value非空，且时间格式恒为hh:mm。
HTML <input type="time"> 本身不支持一键复制
浏览器原生的 <input type="time"> 只提供时间选择和文本编辑，没有内置“复制”按钮或快捷键绑定。用户必须手动全选（Ctrl+A 或鼠标拖选）再 Ctrl+C，稍有不慎就只选中了部分数字（比如只选中分钟），导致粘贴失败。
用 addEventListener('change') + document.execCommand('copy') 实现点击复制
最轻量、兼容性好（Chrome/Firefox/Edge 79+ 支持）的做法是：在时间输入框旁加一个按钮，点击时读取 value 并写入剪贴板。注意不能直接用 click 事件监听 <input> 自身——那样会干扰焦点和选择逻辑。
- 按钮必须是用户主动触发的（如
click），否则execCommand('copy')会被浏览器拒绝 -
value是字符串格式（如"14:30"），无需额外格式化 - 需要临时创建
<textarea></textarea>并聚焦，才能让execCommand生效
<input type="time" id="timeInput"><button onclick="copyTime()">复制时间</button>
<script>
function copyTime() {
const input = document.getElementById('timeInput');
if (!input.value) return;
const textarea = document.createElement('textarea');
textarea.value = input.value;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
</script>
现代写法：用 navigator.clipboard.writeText() 替代 execCommand
navigator.clipboard.writeText() 更干净，不需要伪造 <textarea></textarea>，但要求页面通过 HTTPS 提供，且仅在用户手势（如 click）上下文中调用。Safari 16.4+、Chrome 66+、Firefox 63+ 支持。
- 必须用
async/await或.then()处理 Promise - 需捕获拒绝错误（如用户禁用剪贴板权限、非安全上下文）
- 如果
input.value为空，直接返回，避免复制空字符串
async function copyTime() {
const input = document.getElementById('timeInput');
if (!input.value) return;
try {
await navigator.clipboard.writeText(input.value);
} catch (err) {
console.warn('复制失败:', err);
}
}
容易被忽略的细节
时间输入框的 value 始终是 HH:MM 格式（24 小时制），不带秒、毫秒或时区；即使用户设置了 step="1" 或用 JS 写入 "14:30:45"，读取时也会被截断。如果你需要秒级精度，得改用 <input type="datetime-local"> 或自定义控件。另外，移动端 Safari 对 navigator.clipboard 的限制更严，有时需配合 input 的 focus() 调用才能触发权限提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
