不使用Flash将选定的文本复制到剪贴板中-必须是跨浏览器

|| 我想要一个按钮,用于选择“ 0”中的文本并将其复制到剪贴板。我似乎找不到任何适用于所有浏览器且不使用Flash的解决方案。 当然可以吗?我到处都看过它,但我想他们使用闪光灯,我真的想尽量避免使用闪光灯,因为有些人没有闪光灯。 这是我到目前为止的内容-它只是选择文本:
function copyCode() {
  $(\"#output-code\").focus();
  $(\"#output-code\").select();
}
(重点不一定严格)     
已邀请:
        execCommand(\'复制\') 有一个非常新的选择。它是跨浏览器的,但是直到每个人都更新他们的浏览器之前,这需要时间。 它通过使用
document.execCommand(\'copy\');
功能工作。 使用此功能,您将复制所选文本。这不仅适用于
textarea
,而且适用于网页上的每个选定文本(例如
span
p
div
等)。 在Internet Explorer 10 +,Chrome 43 +,Opera 29+和Firefox 41+中可用(请参见此处的“ 7”兼容性)。 例
// Setup the variables
var textarea = document.getElementById(\"textarea\");
var answer  = document.getElementById(\"copyAnswer\");
var copy    = document.getElementById(\"copyBlock\");
copy.addEventListener(\'click\', function(e) {

   // Select some text (you could also create a range)
   textarea.select(); 

   // Use try & catch for unsupported browser
   try {

       // The important part (copy selected text)
       var ok = document.execCommand(\'copy\');

       if (ok) answer.innerHTML = \'Copied!\';
       else    answer.innerHTML = \'Unable to copy!\';
   } catch (err) {
       answer.innerHTML = \'Unsupported Browser!\';
   }
});
<textarea id=\"textarea\" rows=\"6\" cols=\"40\">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>

<button id=\"copyBlock\">Click to copy</button> <span id=\"copyAnswer\"></span>
   
        您必须使用不想用来自动将文本复制到客户端剪贴板的Flash加载项。一个不使用active-x组件而自动修改客户端剪贴板的网站是出于安全考虑。请注意,active-x组件是在用户计算机上运行的程序,从技术上来说,需要用户的同意才能安装。考虑到剪贴板是操作系统组件,因此很高兴Web浏览器默认情况下不允许网站对它进行劫持。 如果用户没有Flash,禁用了Flash或禁用了active-x,则他或她可能对安全性抱有偏执狂,并且无论如何都不希望您弄乱他或她的键盘。那时,用户将习惯于在网站中没有太多自动或基于脚本的功能。最好不要公开挑战最终用户的意愿。 请参考以下堆栈溢出链接: 如何使用JavaScript复制到剪贴板? Javascript中的跨浏览器Flash检测 最终的答案是使用“零剪贴板”,这是一个使用小型,不可见的Flash电影和JavaScript来按需使用剪贴板功能的库。该库位于此处:https://github.com/zeroclipboard/zeroclipboard第二个链接显示了如何检测Flash是否已禁用或未安装,这使您可以像显示JavaScript一样显示警告消息。     
        现在我们有了@zenorocha的Clipboard.js 要使用它,请下载并调用page.html上的脚本(或使用bower或npm安装)
<script src=\"path_to_script/clipboard.min.js\"></script>
在您的script.js上实例化一个新触发器
new Clipboard(\'.trigger\');
并去那里查看一些用法示例:http://zenorocha.github.io/clipboard.js/#usage     
        
function copyTextToClipboard(text) {
    var textArea = document.createElement(\"textarea\");
    textArea.style.position = \'fixed\';
    textArea.style.top = 0;
    textArea.style.left = 0;  
    textArea.style.width = \'2em\';
    textArea.style.height = \'2em\'; 
    textArea.style.padding = 0;  
    textArea.style.border = \'none\';
    textArea.style.outline = \'none\';
    textArea.style.boxShadow = \'none\';   
    textArea.style.background = \'transparent\';
    textArea.value = text;
    textArea.id = \'ta\';
    document.body.appendChild(textArea);
    //textArea.select();
    var range = document.createRange();
    range.selectNode(textArea);
    textArea.select();
    window.getSelection().addRange(range);
    try {
        var successful = document.execCommand(\'copy\');
    } catch (err) {
         alert(\'Oops, unable to copy\');
    }
    document.body.removeChild(textArea);
    return successful;
}
我希望这会有所帮助     
        这是一个很晚的响应,但对于那些将来进行搜索并且在实现execCommand(\'copy \')事件以使其无法同时在台式机和移动设备上使用的用户而言,这是一个很晚的响应。 跨浏览器,移动友好,无需外部资源或程序
function CopyString(){
    var StringToCopyElement = document.getElementById(\'YourId\');
    StringToCopyElement.select();

    if(document.execCommand(\'copy\')){
        StringToCopyElement.blur();     
    }else{
        CopyStringMobile();
    }
}

function CopyStringMobile(){
    document.getElementById(\"YourId\").selectionStart = 0;
    document.getElementById(\"YourId\").selectionEnd = 999;
    document.execCommand(\'copy\');

    if (window.getSelection) {
      if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }
}
在要触发事件的任何事件上,将CopyString()函数设置为click事件。这可用于移动和台式机操作系统。 说明 您需要采用两种不同的方式来选择要复制的字符串,因为从今天开始,通过台式机进行复制的方法不适用于移动设备。我有一个if then函数来捕获桌面方法是否有效,如果不能,则触发将适用于移动设备的代码。此方法不需要下载或链接。两种方法都会突出显示您要复制的文本,然后将复制命令触发到剪贴板,然后取消选择您要复制的字符串。您可以根据自己的喜好混合代码,但这是这样做的方式。     

要回复问题请先登录注册