Question

我正在尝试在我的颜色选择器上应用“复制到剪贴板”选项，该选项可以显示在h3标签上选择的颜色。这个想法是制作一个背景颜色生成器，其中每次选择一种颜色时，出现在屏幕上，使我们能够选择所有颜色信息，然后能够通过单击底部按钮将这些颜色信息复制到剪贴板。我不知道为什么按钮不起作用。

我仍在研究如何正确使用这些方法，但是我无法使其正常工作。任何建议将不胜感激。

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var color3 = document.querySelector(".color3");
var body = document.getElementById("gradient");
var button = document.querySelector("button");

function setGradient() {
    body.style.background = 
    "linear-gradient(to right, " 
    + color1.value 
    + ", " 
    + color2.value 
    + ", " 
    + color3.value
     ")";

    css.textContent = body.style.background + ";";
}


/*Not working yet!*/
function copyElement(){
    if(setGradient){
        /*Getting the textfield*/ 
    var copyText = css.textContent;
        /*Selecting the text field */
    copyText.select();
    copyText.setSelectionRange(0,99999);
    /*Copying text*/
    document.execCommand("copy");
    alert("Copied!");
    }
}


color1.addEventListener("input",setGradient);
color2.addEventListener("input",setGradient);
color3.addEventListener("input",setGradient);

button.addEventListener("click",copyElement);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gradient Background</title>
    <link rel="stylesheet" href="style.css">
</head>
<body id="gradient">
        <h1>Background Generator</h1>
        <input class="color1" type="color" name="color1" value="#00ff00">
        <input class="color2" type="color" name="color2" value="#ffff00">
        <input type="color" class="color3" name="color3" value="#AF0066">
        <h2>Current CSS Backgrounds</h2>
        <h2>Deluxe edition </h2>
        <h3></h3>
        <input type="button" class="button" name="button" value="Copy to clipboard">
        <script type="text/javascript" src="script.js"></script>
</body>
</html>

Answer 1

您有几个错误：

您选择的是<button>，但是您在HTML中使用了<input>
您错过了+函数中的setGradient
您永远不会致电setGradient
您访问剪贴板的逻辑不起作用

这是一个有效的版本：

var css = document.querySelector("h3");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var color3 = document.querySelector(".color3");
var body = document.getElementById("gradient");
// I change the html to match this selector
var button = document.querySelector("button");

function setGradient() {
    body.style.background = 
    "linear-gradient(to right, " 
    + color1.value 
    + ", " 
    + color2.value 
    + ", " 
    + color3.value
    + ")"; // missing `+`

    css.textContent = body.style.background + ";";
}

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a
  // flash, so some of these are just precautions. However in
  // Internet Explorer the element is visible whilst the popup
  // box asking the user for permission for the web page to
  // copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}


/*Not working yet!*/
function copyElement(){
  setGradient();
  alert(css.textContent)
    if(!!css.textContent){
      copyTextToClipboard(css.textContent);
    alert("Copied!");
    }
}


color1.addEventListener("input",setGradient);
color2.addEventListener("input",setGradient);
color3.addEventListener("input",setGradient);

button.addEventListener("click",copyElement);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gradient Background</title>
    <link rel="stylesheet" href="style.css">
</head>
<body id="gradient">
        <h1>Background Generator</h1>
        <input class="color1" type="color" name="color1" value="#00ff00">
        <input class="color2" type="color" name="color2" value="#ffff00">
        <input type="color" class="color3" name="color3" value="#AF0066">
        <h2>Current CSS Backgrounds</h2>
        <h2>Deluxe edition </h2>
        <h3></h3>
  <button type="button" class="button" name="button">Copy to clipboard</button>
        <script type="text/javascript" src="script.js"></script>
</body>
</html>

Try it online

我找到了从以下位置访问剪贴板的方法：How do I copy to the clipboard in JavaScript?

Answer 2

首先，std::set是正确的（注意点字符）。之后，document.querySelector(".button")方法适用于您的输入元素，而不适用于h3或其textContent。

无法实现复制到剪贴板功能

2 个答案: