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

Question

为了我的编程文化，我正在试验音频 html 标签和音频源，以及 OS 剪贴板。已经3天了，我正在尝试解决暴露的问题如下。

情况

我在服务器上有一个 html 页面，里面有一个 js，里面有一堆代码。 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() 将执行并将输入的值复制到 OS剪贴板。
如果我手写 copyTitleOnClipboard() 函数的名称到 Google Chrome 控制台，它也可以工作。

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

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

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

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

问题

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

问题

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

提前致谢。

Answer 1

诶诶诶诶……

先生，我已经复制了您的代码，并在按钮的 onclick="copyTitleOnClipboard()" 中将 copyTitleOnClipboard() 替换为 execThings().... 它工作正常，execThings() 和copyTitleOnClipboard() 打印在控制台中，输入框的值被复制到剪贴板，我验证...

这清楚地表明问题出在问题中省略的其他代码并替换为 //some other code 注释。除了问题的代码之外，请包括该代码，因为我认为那里的某些东西弄乱了 execThings() 函数。

Answer 2

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

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

打开这个 link，等待 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 link 上的 Click Me to Exec Things 按钮，它会触发相同的 execThings() 功能，并且能够复制文本。

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

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

希望对您有所帮助！

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

Copy selected input box with javascript doesn't work properly

javascript

clipboard

copy

paste

情况

行为

问题

问题