点击选择和复制输入文本？

Question

我看到过几个关于这个问题的问答，大多数都是至少5或6年前的。

我想要一个输入框：

<input id="copy-text" type="text" value="Click this text!">

这是我一直在尝试使用的JavaScript代码：

document.getElementById("copy-text").onclick = function() {
  this.select();
  execCommand('copy');
  alert('This is a test...');
}

我知道我的代码不起作用。如果我删除execCommand（'copy'）;，那么alert()弹出，但似乎在那一行出现错误。我也尝试过使它this.execCommand('copy');，但真的不确定该怎么做。

提供的链接为： https://jsfiddle.net/6v24k4sk/ 我的想法是让用户点击输入框，然后选择所有文本，最后将其复制到剪贴板中。

有什么想法？

- Matthew

---

@StephenP 不好意思，我不太擅长JS，说实话我甚至不知道那是什么。也许你可以提供一些见解？ - Matthew

可能是如何在JavaScript中复制到剪贴板？的重复问题。 - Trevor Clarke

@Matthew 取决于你的浏览器如何使用开发者工具，但尝试右键菜单并选择“检查”或“检查元素”；在IE中尝试F12。顺便说一句，this.select()会清除已选择的文本（在你的fiddle中），因此整个内容都被复制，而不是选择部分。删除该行代码后，您可以单击拖动以选择文本框中的文本，当您释放鼠标按钮时，只有所选文本被复制到剪贴板中。 - Stephen P

@StephenP 谢谢！对不起我知道如何进入开发工具，只是不知道你在控制台中提供的那个短语的含义。感谢您的提示！我正在使用PHP动态创建一个链接，所以我希望所有内容都被选中并复制。 - Matthew

Answer 1

在execCommand的前面应放置一个document。

document.getElementById("copy-text").onclick = function() {
    this.select();
    document.execCommand('copy');
    alert('This is a test...');
}

在这里你可以找到一个可行的示例： https://jsfiddle.net/9q3c1k20/

编辑:

该函数还会返回此功能在浏览器中是否受支持的信息。我认为您应该检查该值，因为execCommand仍然没有最终规范，因此不能保证在所有浏览器中都能正常工作。

- kogelnikp

---

完美！出于好奇，也为了我能理解它，为什么 select() 必须是 this.select()，而 execCommand() 必须是 document.execCommand()，但 alert() 前面不需要任何东西呢？ - Matthew

@Matthew，由于你正在处理一个(onclick)事件处理程序的函数中，所以this指的是事件发生的对象。在这种情况下，this是<input ...>控件，所以你要在该对象上调用.select()方法。execCommand函数是document对象的属性，因此调用方式为document.execCommand()，而没有限定的execComand()会在_window_对象上调用，不存在window.execCommand函数。 - Stephen P

谢谢提供信息，我很感激。我发现学习JS是一门有趣的语言 - 有时候它几乎感觉有些混乱。 - Matthew

Answer 2

在不使用 onclick 函数的情况下，将此函数与您的 copy_btn 搭配使用。

function function_name() {
    var c = document.getElementById("copy");
    c.select();
    document.execCommand('copy');
}

- Vijay Kumavat