欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

源生JS实现点击复制功能

程序员文章站 2022-07-01 15:51:17
之前在工作中,有位同事问过我一个问题,JS如何实现点击复制功能。给他解决后现在来总结归纳一下,顺便做个笔记。 PS:此乃本人第一篇博客(跟着同事大佬学习),涉及知识尚浅,如有任何意见和建议请告知于我。下面开始正文:

之前在工作中,有位同事问过我一个问题,js如何实现点击复制功能。给他解决后现在来总结归纳一下,顺便做个笔记。

ps:此乃本人第一篇博客(跟着同事大佬学习),涉及知识尚浅,如有任何意见和建议请告知于我。下面开始正文:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>源生js实现点击复制功能</title>
</head>
<body>
<button onclick="clkcopy()">点击复制</button>
<input type="text" id="text" value="123">
<script>
    function clkcopy() {
        var text = document.getelementbyid("text");
        text.select();
        document.execcommand('copy');
        alert("复制成功!");
    }
</script>
</body>
</html>

通过dom元素的select()方法可以选择到<input>和<textarea>中的文字,再调用document.execcommand('copy');实现复制功能。

那么,如果我们想要复制<div>中的内容,可以用上述方法嘛?经测试,使用上述方法点击复制<div>中的内容会报错

 源生JS实现点击复制功能

 那么我们可以使用如下方法来实现此功能:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>源生js实现点击复制功能</title>
</head>
<body>
<button onclick="clkcopydiv()">点击复制</button>
<div id="div">123</div>
<script>
    function clkcopydiv() {
        var text = document.getelementbyid("div");
        var selection = window.getselection();
        var range = document.createrange();
        range.selectnodecontents(text);
        selection.removeallranges();
        selection.addrange(range);
        document.execcommand('copy');
        alert("复制成功!");
    }
</script>
</body>
</html>