情况

我在服务器上有一个带有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（）将执行并将输入的值复制到OS剪贴板中。
如果我用手将函数 copyTitleOnClipboard（）的名称写入Google Chrome控制台，那么它也可以工作。

对我来说，这意味着 copyTitleOnClipboard（）函数本身可以正常工作。实际上，在这两种情况下，都在控制台上获得了以下行的调试反馈：

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

按预期返回输出 标题已复制到剪贴板

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

问题

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

问题

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

谢谢。

Answer 1

eeeehhhmmm ...

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

这清楚地表明问题在于问题中省略了其他代码，并用copyTitleOnClipboard()注释代替了。请在问题代码之外再添加该代码，因为我认为其中的某些内容会弄乱//some other code函数。

Answer 2

我能够复制您面临的问题。

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

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

以下是该行为的解释：

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

基本JS方法document.execCommand（）要求它由用户触发交互以防止网页与剪贴板混淆在用户不知情的情况下。这是一项安全功能，由每个浏览器强制执行。

$(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

现在，我不确定您的用例是什么，但是您将需要用户采取行动来复制文本。

希望这会有所帮助！

用javascript复制所选输入框无法正常工作

情况

行为

问题

问题

2 个答案: