Question

我试图用一个按钮将文本复制到剪贴板，但是遇到了麻烦。它正在复制错误的内容。

基本上，我有一个名为my_fav_food的变量。然后，我有一个名为My Fav Food的按钮。当我单击此按钮时，它将调用函数copying_function并将my_fav_food变量解析为该函数。然后该功能自动将文本复制到剪贴板。

<!DOCTYPE html>
<html>
<body>
<script>
var my_fav_food = "My fav food is pizza"
</script>

<button onclick="copying_function(my_fav_food)">My Fav Food</button>

<script>
function copying_function(string) {
  string.select();
  document.execCommand("string");
}
</script>

</body>
</html>

Answer 1

select()方法只能用于选择文本字段的内容。您无法像现在一样使用它。

您可以尝试：https://clipboardjs.com/

或者您也可以尝试将其放置在隐藏的文本区域（我不保证这会起作用）

Answer 2

您需要创建一个DOM元素并将其设置为字符串，然后以编程方式进行选择。由于您没有将元素附加到DOM，因此在视图中将不可见。

<!DOCTYPE html>
<html>
<body>
<script>
var my_fav_food = "My fav food is pizza";
</script>

<button onclick="copying_function(my_fav_food)">My Fav Food</button>

<script>
function copying_function(string) {
 // string.select();
  const el = document.createElement('textarea');
  el.value = string;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  console.log("The data copied successfully! press `ctrl+v` to see output");
    document.body.removeChild(el);
}
</script>

</body>
</html>

如何通过单击按钮将文本复制到剪贴板

2 个答案: