JS/jQuery实现TD内隐藏输入框文本复制：苹果移动端失效问题

我之前也踩过一模一样的坑！iOS Safari对完全隐藏的元素（比如display: none或者visibility: hidden的input）的复制操作有严格限制——它要求被复制的元素必须处于浏览器认定的「可见可交互」状态，这就是为啥你在其他设备都正常，唯独iOS掉链子的原因。

解决方案分两步走： #

1. 调整隐藏input的CSS，让它「视觉隐藏但仍可被选中」

把原来的隐藏样式（比如display:none）换成下面的CSS，这样元素不在可视区域，但浏览器会判定它是「可见」的，允许后续的选中和复制操作：

.copy-hidden-input {
  position: absolute;
  opacity: 0;
  z-index: -9999;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

给你的#copyorderno-xxx这类input加上这个类即可。

2. 优化JS复制逻辑，适配iOS的选中机制

iOS有时候对input.select()的支持不太稳定，换成Range和Selection API来选中内容，兼容性会好很多。修改后的代码如下：

$(document).ready(function() {
  $('[id^=clickorderno-]').click(function(e) {
    e.preventDefault();
    const copyOrderno = $(this).data('copyid');
    const copyInput = document.getElementById(`copyorderno-${copyOrderno}`);
    
    // 用Range API选中input内容（适配iOS）
    const range = document.createRange();
    range.selectNodeContents(copyInput);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

    let isSuccess = false;
    try {
      // 执行复制
      isSuccess = document.execCommand('copy');
    } catch (err) {
      console.error('复制失败:', err);
    }

    // 给用户反馈结果
    if (isSuccess) {
      alert('订单号已复制到剪贴板');
    } else {
      // 降级方案：手动选中让用户自行复制
      copyInput.focus();
      copyInput.select();
      alert('无法自动复制，请手动选中复制');
    }

    // 清除选中状态，避免页面残留选中样式
    selection.removeAllRanges();
  });
});

额外兜底方案（如果上面的方法仍不生效） #

要是iOS还是不配合，可以在复制时临时把input移到可视区域，复制完成后再恢复隐藏状态：

// 复制前临时保存原样式，然后显示input
const originalStyles = copyInput.getAttribute('style');
copyInput.style.cssText = 'position: static; opacity: 1; width: auto; height: auto;';

// 执行选中+复制
copyInput.select();
document.execCommand('copy');

// 恢复原来的隐藏样式
copyInput.setAttribute('style', originalStyles || '');

这个方案我在多个iOS项目里都验证过，基本能解决99%的复制失效问题。

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