Bootstrap模态框中“复制到剪贴板”功能失效问题求助

这个问题我之前也碰到过！根源在于Bootstrap 3模态框的焦点锁定机制，加上旧版document.execCommand('copy')的局限性导致的——虽然你的函数执行了，控制台也输出了日志，但剪贴板就是拿不到内容。

问题原因 #

Bootstrap 3的模态框默认带有tabindex="-1"，会自动将焦点锁定在模态框内部，而动态创建的<textarea>虽然被添加到了body中，但它不在模态框的焦点上下文里。旧的document.execCommand('copy')需要操作的元素处于可聚焦且当前焦点能覆盖到的状态，所以复制操作实际上没生效。

方案一：修复现有代码 #

给动态创建的<textarea>添加tabindex属性并手动聚焦，确保复制操作能拿到正确的上下文：

$(document).ready(function(){ 
  $(document).on('click','#copy-btn', function(){ 
    copytext('kilroy tested this'); 
  }) 
}); 

function copytext(text) { 
  var textField = document.createElement('textarea'); 
  textField.innerText = text; 
  // 添加tabindex确保元素可被聚焦
  textField.setAttribute('tabindex', '0');
  document.body.appendChild(textField); 
  // 先聚焦再选中文本
  textField.focus();
  textField.select(); 
  try {
    var isSuccess = document.execCommand('copy');
    console.log(isSuccess ? `已复制: ${text}` : '复制失败');
  } catch (err) {
    console.error('复制出错:', err);
  }
  textField.remove(); 
}

方案二：使用现代Clipboard API（推荐） #

document.execCommand('copy')已经被标记为废弃，现在更推荐使用原生的Clipboard API，它不需要创建额外DOM元素，且兼容性更好（除了一些极旧的浏览器），还支持异步操作：

$(document).ready(function(){ 
  $(document).on('click','#copy-btn', async function(){ 
    await copytext('kilroy tested this'); 
  }) 
}); 

async function copytext(text) {
  try {
    // 直接写入剪贴板
    await navigator.clipboard.writeText(text);
    console.log(`成功复制到剪贴板: ${text}`);
  } catch (err) {
    console.error('Clipboard API失败，尝试降级方案:', err);
    // 降级到旧方法，兼容不支持Clipboard API的浏览器
    fallbackCopy(text);
  }
}

function fallbackCopy(text) {
  var textField = document.createElement('textarea');
  textField.innerText = text;
  textField.setAttribute('tabindex', '0');
  document.body.appendChild(textField);
  textField.focus();
  textField.select();
  try {
    var isSuccess = document.execCommand('copy');
    console.log(isSuccess ? `降级方案已复制: ${text}` : '降级方案复制失败');
  } catch (err) {
    console.error('降级方案也失败:', err);
  }
  textField.remove();
}

额外提示 #

如果你是复制模态框内#error-message的内容，直接把copytext的参数换成$('#error-message').text()即可（用text()避免复制HTML标签）。

内容的提问来源于stack exchange，提问作者Tim Morton