Question

下午，我正在尝试创建一个简单的HTML页面，上面有一些按钮，当你点击它们时，它会调用JS将一些文本复制到剪贴板，这样它就可以粘贴到其他地方（Word文档等等）。）。

<body>
    <button onclick="setClipboard('Thank you for your help.')">Greeting</button>
    <button onclick="setClipboard('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s')">Item 2</button>
</body>

这是在呼唤：

function setClipboard(value) {
    var tempInput = document.createElement("input");
    tempInput.style = "position: absolute; left: -1000px; top: -1000px";
    tempInput.value = value;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
}

它可以复制第一个按钮没有问题，但第二个按钮不起作用。如果我缩短按钮＃2中有多少单词，它就可以工作。所以让我认为它不起作用，因为那里有多长时间/很多单词。

任何帮助都将不胜感激。

Answer 1

似乎第二个按钮内的文字需要使用'进行转义，以使其正常工作，如下所示：

function setClipboard(value) {
  var tempInput = document.createElement("input");
  tempInput.style = "position: absolute; left: -1000px; top: -1000px";
  tempInput.value = value;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  document.body.removeChild(tempInput);
  console.log(value);
}

Answer 2

这是因为在第二个按钮中，文本具有中断字符串的单数引号（＆＃39;）。您需要将第二个按钮的setClipboard中的起始和结束引号更改为反引号（`），以使其适用于onclick上的双引号和引号：

<button onclick="setClipboard(`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s`)">Item 2</button>

反引号明确是ECMAScript 6的一项功能;它们被称为模板文字，它们允许单引号和双引号驻留在字符串中。如果您的浏览器不支持ES6，那么只使用反斜杠（\）转义单引号也可以。

JSFiddle

onClick按钮最大字符长度

2 个答案: