javascript - 使用 javascript 复制选定的输入框无法正常工作

Question

对于我的编程文化，我正在试验音频 html 标签和音频源，以及操作系统剪贴板。 3天了，我正在尝试解决暴露的问题，如下所示。

情况

我在服务器上有一个带有 js 的 html 页面，其中有一堆代码。 js 做了很多事情，其中​​包括生成两个输入插入我需要适当的 html 的地方:

文本输入:

<input type="text" id="titleToCopy" value="" />

and a button:

    <input type="button" value="Copy" onclick="copyTitleOnClipboard()"/>


Into the js code there are also these two functions

function execThings() //This execute some operations and also calls other functions
{
    console.log(arguments.callee.name);
    var dest = document.getElementById(myplayerID); // Gets my player by its ID
    var osrc = getOriginalPlayer().src;
    dest.src = osrc;
    updateTitleToCopy();
    copyTitleOnClipboard();
    stopOriginalPlayer();
}


function copyTitleOnClipboard() // This function select and copies to the Operative System clipboard the content of the related text input
{
    console.log(arguments.callee.name);
    var titleInput = document.getElementById("titleToCopy");
    titleInput.focus(); // The function works good with or without this line
    titleInput.select();

    var r = document.execCommand("copy");
    r = r === true ? "has been" : "not";

    console.log("Title " + r + " copied to clipboard");
}

出于调试目的，我在两个函数中都添加了行

console.log(arguments.callee.name);

以这种方式在 Chrome 控制台上显示函数的名称，因此我可以检查它是否开始执行。

行为

• 如果我单击按钮，相关的 onclick 函数 copyTitleOnClipboard() 将执行并将输入的值复制到操作系统剪贴板中。
• 如果我手写 copyTitleOnClipboard() 函数的名称到 Google Chrome 控制台，它也能正常工作。

对我来说，这意味着 copyTitleOnClipboard() 函数本身可以正常工作。事实上，在这两种情况下，我都在控制台上得到了调试反馈，这要归功于行:

console.log("Title " + r + " copied to clipboard");

如预期的那样返回输出 标题已复制到剪贴板

如果我将剪贴板的内容粘贴到其他地方(例如记事本)，结果就是文本框输入的值，正如预期的那样。

问题

问题是，当执行是由于调用 copyTitleOnClipboard() 函数的另一个函数 execThings() 时，它不再起作用: copyTitleOnClipboard() 函数实际上在控制台上执行，按预期显示其名称，但我也收到失败反馈消息: 标题未复制到剪贴板 如果我将剪贴板内容粘贴到记事本中，它不包含必须复制的文本框值或根本为空

问题

• 为什么从另一个函数调用 copyTitleOnClipboard() 函数不像我通过单击按钮或通过 Chrome 控制台手动调用它那样有效？
• 我该如何解决这个问题？

提前致谢。

Answer 1

我能够重现您面临的问题。

在此处检查此代码:https://jsfiddle.net/t1pe6zw8/

打开此链接，等待 5 秒钟，看看会发生什么。

这里是对行为的解释:

我在这里假设 execThings() 函数是由某个不是由用户操作引发的事件触发的。

The basic JS method document.execCommand(), requires that it be triggered by user interaction to prevent web pages from messing with the clipboard without the user's knowledge. This is a security feature and is enforced by every browser.

$(document).ready(function(){
    setTimeout(function(){ execThings(); }, 5000);
});

上面的这段代码，一旦文档准备就绪，就会在 5 秒后触发 execThings() 函数，由于它是在没有用户操作的情况下触发的，因此无法复制文本。

现在，如果您单击上面 JSFiddle 链接上的 Click Me to Exec Things 按钮，它会触发相同的 execThings() 函数，并且它能够复制文本.

您可以在此处获得更多详细信息:https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#Return_value

现在，我不确定您的用例是什么，但您需要获得用户操作才能复制文本。

希望这对您有所帮助!