代码之家 › 专栏 › 技术社区 › GYaN user7305435

当输入字段隐藏时,jquery将文本复制到剪贴板

jquery javascript

GYaN user7305435 · 技术社区 · 7 年前

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

我的代码是

<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…

我还缺什么吗?

3 回复 | 直到 7 年前

Takit Isy Surendra 7 年前

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

我建议你如下:

移除你的 input 从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>

希望有帮助。

GYaN user7305435 7 年前

尝试不透明度0; 在这里,它确实起作用;)

<input type="text" class="link hidden" value="Hello World 2">
.hidden {
  position:absolute; top:-50px; opacity:0;
}

https://jsfiddle.net/o2gxgz9r/47741/

Himanshu Upadhyay 7 年前

应用下面提到的样式,然后使用相同的jquery代码。它会起作用的。

<input type="text" class="link hidden" value="Hello World 2" style="position: absolute; left: -1000px;">

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前