javascript - 当输入字段隐藏时，Jquery将文本复制到剪贴板

Question

我想复制剪贴板中输入字段的内容

我的代码是

<button class="btn btn-default btn-xs copy-link" title="Copy Link"><i class="fa fa-copy"></i></button>
<input type="text" class="link" value="Hello World">

<script>
    $(document).on('click','.copy-link', function() {
        var copyText = $(this).siblings('.link');
        copyText.select();
        document.execCommand("copy");
        alert("Copied the text: " + copyText.val());
    });
</script>

这段代码工作正常...

但我想隐藏输入字段。喜欢

 <button class="btn btn-default btn-xs copy-link" title="Copy Link"><i class="fa fa-copy"></i></button>
<input type="hidden" class="link" value="Hello World" />

那么该值无法处理相同的 jquery...

还有什么我遗漏的吗？

Answer 1

如果您可以将链接放入按钮的链接属性中，

我建议您执行以下操作:

• 从 HTML 中删除您的输入
• 直接在函数中创建

这是一个工作片段:

$(document).on('click', '.copy-link', function() {
  var link = $(this).attr('link');
  var tempInput = document.createElement("input");
  tempInput.style = "position: absolute; left: -1000px; top: -1000px";
  tempInput.value = link;
  document.body.appendChild(tempInput);
  tempInput.select();
  document.execCommand("copy");
  console.log("Copied the text:", tempInput.value);
  document.body.removeChild(tempInput);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<button class="btn btn-default btn-xs copy-link" title="Copy Link" link="Hello World"><i class="fa fa-copy"></i></button>

希望有帮助。