Question

我目前正在尝试编写JS函数以提供“单击按钮时复制链接”。它可以在Android和PC上正常运行，但是当我在iPad或iPhone上尝试使用时，出现错误：

TypeError：Range.selectNodeContents的参数1（'refNode'）必须为 Node的实例

我也建立了一种在IOS设备上复制它的方法，因为普通的复制命令不起作用：

function copyUrl(e) {
    var tmp = jQuery("<input>");
    jQuery("body").append(tmp.val(e));

    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
        var editable = tmp.contentEditable;
        var readOnly = tmp.readOnly;
        tmp.contentEditable = true;
        tmp.readOnly = false;
        var range = document.createRange();
        range.selectNodeContents(tmp);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        tmp.setSelectionRange(0, 999999);
        tmp.contentEditable = editable;
        tmp.readOnly = readOnly;
    } else {
        tmp.select();
    }

    document.execCommand("copy");
    tmp.remove();
    alert("Link copied successfully!")
}

div {
  padding: 30px;
}

a {
  border: 1px solid;
  padding: 12px 10px;
  cursor: pointer;
}

a:hover {
  border-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a class="btn-floating" onclick="copyUrl('google.de')">Share</a>
</div>

我错过了什么？

Answer 1

如果将JQuery元素作为参数传递，它将给出您收到的TypeError，因为它没有与Node接口。

TypeError消息与您不执行以下任一操作有关。

// copy(document.getElementByClass("")[0];
copy(document.getElementById("")); // Pure JS
copy($("#")[0]); // JQuery

示例，要求提供一个传递变量字符串的链接：它创建一个元素，然后在选择它并复制我们插入其中的变量值后将其删除。

我建议您去图书馆Cliboard.js

function copy(href) {
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    dummy.setAttribute('value', href);
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

<a href="#" onclick="copy('https://wehavehaxedthecliboard.com')">Copy</a>

FROM IOS Copy to clipboard using Javascript in iOS

var copy = function(href) {
    var input = document.createElement("input");
    document.body.appendChild(input);
    input.setAttribute('value', href);

    var isiOSDevice = navigator.userAgent.match(/ipad|iphone/i);

    if (isiOSDevice) {

        var editable = input.contentEditable;
        var readOnly = input.readOnly;

        input.contentEditable = true;
        input.readOnly = false;

        var range = document.createRange();
        range.selectNodeContents(input);

        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);

        input.setSelectionRange(0, 999999);
        input.contentEditable = editable;
        input.readOnly = readOnly;

        document.body.removeChild(input);
    } else {
        input.select();
    }

    document.execCommand('copy');
    document.body.removeChild(input);
}

I think this works on ios
<a href="#" onclick="copy('http://google.com')">Copy text</a>

Answer 2

尝试这样的事情：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
	$('.copy-to-clipboard input').click(function() {
	$(this).focus();
	$(this).select();
	document.execCommand('copy');
	alert('Copy to Clipboard!');
    });
});
</script>


<span class="copy-to-clipboard">
	<input id="copy-test" readonly type="text" value="google.de">
</span>

Answer 3

尝试这个

/*
    Copy text from any appropriate field to the clipboard
  By Craig Buckler, @craigbuckler
  use it, abuse it, do whatever you like with it!
*/
(function() {

    'use strict';
  
  // click events
  document.body.addEventListener('click', copy, true);

    // event handler
    function copy(e) {

    // find target element
    var 
      t = e.target,
      c = t.dataset.copytarget,
      inp = (c ? document.querySelector(c) : null);
      
    // is element selectable?
    if (inp && inp.select) {
      
      // select text
      inp.select();

      try {
        // copy text
        document.execCommand('copy');
        inp.blur();
        
        // copied animation
        t.classList.add('copied');
        setTimeout(function() { t.classList.remove('copied'); }, 1500);
      }
      catch (err) {
        alert('please press Ctrl/Cmd+C to copy');
      }
      
    }
    
    }

})();

div {
  padding: 30px;
}

a {
  border: 1px solid;
  padding: 12px 10px;
  cursor: pointer;
}

a:hover {
  border-color: blue;
}

<div>
<input style="position: absolute;
  height: 100px;
  width: 100px;
  right: -150px;
  top: -150px;overflow:hidden;" type="text" id="website" value="http://hpecas.com/teste" />

<a class="btn-floating" href="#" data-copytarget="#website">Share</a>
</div>

单击按钮上的复制链接到剪贴板不起作用

3 个答案: