Question

我试图遵循此代码：https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

HTML模式：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">App Link</h4>
          </div>
          <div class="modal-body">
            <input id="appID" value="123"></input>
            <button type="button" class="btn btn-success" id="copyBtn">Copy</button>
            </div>                  
        </div>
      </div>
    </div>

这是我的JS：

var copyBtn = document.getElementById('copyBtn');

copyBtn.onclick = function(){
var myCode = document.getElementById('appID').value;
var fullLink = document.createElement('input');
document.body.appendChild(fullLink);
fullLink.value = "http://fulllink/" + myCode;
fullLink.select();
document.execCommand("copy", false);
fullLink.remove();
alert("Copied the text: " + fullLink.value);

}

当输入和按钮位于模态内时，代码将无效;代码将放置在正文中。

Answer 1

您收到错误是因为.select是绑定到输入元素的函数。您目前正试图在fullLink字符串上调用select。我们需要创建一个输入元素并赋予它你的价值。像这样：

＆＃13;

var copyBtn = document.getElementById('copyBtn');
copyBtn.onclick = function(){
    var myCode = document.getElementById('appID').value;
    var fullLink = document.createElement('input');
    document.body.appendChild(fullLink);
    fullLink.value = "http://fulllink/" + myCode;
    fullLink.select();
    document.execCommand("copy", false);
    fullLink.remove();
    alert("Copied the text: " + fullLink.value);
}

＆＃13;

<input id="appID" value="123"></input>
<button id="copyBtn">Copy</button>

＆＃13;

Answer 2

我遇到了类似的问题，试试这个代码

$('#copyBtn').click(function() {
 var text=$('#appID').text();
 navigator.clipboard.writeText(text);
});

Answer 3

如果您删除tabindex="-1"，它将起作用。

Answer 4

一种非常优雅的方法是创建一个文本区域元素，这将使我们能够利用.select函数。

JS代码：

function copyStringToClipboard (str) {
   // Create new element
   var el = document.createElement('textarea');
   // Set value (string to be copied)
   el.value = str;
   // Set non-editable to avoid focus and move outside of view
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   // Select text inside element
   el.select();
   // Copy text to clipboard
   document.execCommand('copy');
   // Remove temporary element
   document.body.removeChild(el);
}

被调用的函数示例：

copyStringToClipboard("abc123");

在以下位置提供了示例：

shorturl.at/hLWX7

使用.select（）获取Uncaught TypeError将文本复制到剪贴板

4 个答案: