不能将document.execCommand(' copy')与输入类型文件一起使用

时间:2016-01-30 08:22:32

标签: javascript html file copy execcommand

无法将textarea的内容复制到剪贴板 使用下面的代码。



    <script>
    function copyText()
    {
    document.getElementById('in').click();
    call();
    }
    function call()
    {
    if(getComputedStyle(document.getElementById('butt')).opacity>0.5)
    {setTimeout(call,100);return;}

    var ta=window.document.createElement("textarea");
    window.document.body.appendChild(ta);
    ta.value="this text should be in clipboard";
    ta.focus();
    ta.selectionStart=0;
    ta.selectionEnd=ta.value.length;
    ta.addEventListener('keypress', function(){window.document.execCommand('copy');});
    var event = new Event('keypress');
    ta.dispatchEvent(event) ;
    }
    </script>
    <button id='butt' onClick='copyText()'>copy text</button>
    <input id='in' type='file' style='display:none;'/>
    <style>
    #butt
    {opacity:0.5;}
    #butt:hover
    {opacity:1;}
    </style>

如果我在return语句之前的if块中的alert()之后添加setTimeout(call,100)。正在复制文本。 在chrome,opera和firefox上尝试了它,每个浏览器都以同样的方式响应。
我使用上面的结构来复制用户打开的文件的base64编码文本。

1 个答案:

答案 0 :(得分:2)

大多数浏览器只会通过这种方式将文本从真实用户事件(如点击或按键)直接启动的Javascript复制到剪贴板,而不是从setTimeout()复制。因此,如果您的代码采用setTimeout()路径,则可能无法将文本复制到剪贴板。你不能只制造按键事件 - 这个限制的重点是需要一个真实的用户事件,而不是一个由代码制造的事件。

如果您有兴趣,这里有一个经过测试的功能,可以在this answer中将文字复制到剪贴板。它具有与任何其他代码相同的限制 - 它必须从真实用户事件调用的Javascript启动,并且适用于Chrome,Firefox和IE的现代版本,但不适用于Safari。