如何点击button-type-input复制input值到剪贴板？含按钮型输入框复制方案

我来帮你搞定这个剪贴板复制的问题！不管是想点击按钮把文本输入框的内容复制到剪贴板，还是要复制按钮类型输入框本身的内容，都有靠谱的解决方案，咱们一步步来：

一、点击按钮复制文本输入框的值 #

这是你最初的核心需求，用现代浏览器支持的navigator.clipboard API就能轻松实现，还能兼容旧浏览器。

完整代码示例 #

<!-- HTML部分 -->
<input type="text" id="sourceText" placeholder="输入要复制的内容">
<input type="button" id="copyTextBtn" value="点击复制文本">

<script>
// JS部分
document.getElementById('copyTextBtn').addEventListener('click', async () => {
  const sourceInput = document.getElementById('sourceText');
  // 先判断输入框有没有内容
  if (!sourceInput.value.trim()) {
    alert('请先输入内容哦！');
    return;
  }
  
  try {
    // 用现代剪贴板API复制
    await navigator.clipboard.writeText(sourceInput.value);
    alert('内容已成功复制到剪贴板！');
  } catch (error) {
    console.warn('现代API调用失败，切换兼容模式:', error);
    // 兼容旧浏览器的 fallback 方案
    sourceInput.select();
    document.execCommand('copy');
    alert('内容已复制（兼容模式）！');
  }
});
</script>

代码说明 #

• 优先使用navigator.clipboard.writeText()，这是现在标准的异步剪贴板操作方法，安全且高效。
• 加入了内容判断，避免复制空内容。
• 捕获异常后用旧的document.execCommand('copy')做兼容，覆盖那些还不支持新API的老浏览器。

二、复制按钮类型输入框（button-type-input）的值到剪贴板 #

你之前提到想把文本输入框改成按钮类型但不知道怎么复制它的值，这里要注意：<input type="button">的显示文字就是它的value属性值，我们只需要获取这个value再复制就行。不过按钮本身不能被选中，所以兼容模式需要点小技巧：

完整代码示例 #

<!-- HTML部分 -->
<input type="button" id="btnSource" value="我是按钮上的文字，点下面的按钮复制我！">
<input type="button" id="copyBtnValue" value="复制按钮内容">

<script>
// JS部分
document.getElementById('copyBtnValue').addEventListener('click', async () => {
  const btnElement = document.getElementById('btnSource');
  const btnValue = btnElement.value;
  
  try {
    // 同样优先用现代API
    await navigator.clipboard.writeText(btnValue);
    alert('按钮内容已复制！');
  } catch (error) {
    console.warn('现代API调用失败，切换兼容模式:', error);
    // 创建临时文本框来中转内容（因为按钮不能被选中）
    const tempInput = document.createElement('input');
    tempInput.style.position = 'fixed';
    tempInput.style.opacity = '0'; // 隐藏临时输入框
    tempInput.value = btnValue;
    document.body.appendChild(tempInput);
    
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput); // 复制完移除临时元素
    
    alert('按钮内容已复制（兼容模式）！');
  }
});
</script>

代码说明 #

• 直接获取按钮的value属性就能拿到它显示的文字。
• 兼容模式下创建一个隐藏的临时文本输入框，把按钮的值赋值给它，选中复制后再移除这个临时元素，完美解决按钮不能被选中的问题。

你之前的代码无法实现复制，大概率是没有正确调用剪贴板API，或者在处理按钮类型输入框时没考虑到它不能被选中的特性，试试上面的方案肯定能解决问题！

内容的提问来源于stack exchange，提问作者aQwus jargon