Jquery在隐藏输入字段时将文本复制到剪贴板
Jquery在隐藏输入字段时将文本复制到剪贴板
提问于 2018-06-05 01:08:00
我想要复制剪贴板中输入字段的内容。
我的代码是
<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
Stack Overflow用户
回答已采纳
发布于 2018-06-05 02:00:47
如果您可以将链接放入按钮中的链接属性，
我建议你如下：
- 从HTML中删除
input - 直接在函数中创建
下面是一个工作片段：
$(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>
希望能帮上忙。
Stack Overflow用户
发布于 2018-06-05 01:23:28
尝试不透明度0；在这里它肯定会工作;)
<input type="text" class="link hidden" value="Hello World 2">
.hidden {
position:absolute; top:-50px; opacity:0;
}Stack Overflow用户
发布于 2018-06-05 01:25:58
应用下面提到的样式，然后使用相同的jquery代码。看起来不错。
<input type="text" class="link hidden" value="Hello World 2" style="position: absolute; left: -1000px;">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50696276
复制相关文章
点击加载更多
相似问题
如何测试使用useQuery的组件的示例？
主干网.基于组件的大型web项目的web样板
测试Python项目的示例目录
编写A-Frame的测试规范
在此示例中使用空返回的目的是什么？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
