JavaScript - 浏览器中点击拷贝内容-向日葵屋

JavaScript - 浏览器中点击拷贝内容

1.应用场景

主要用于浏览器中点击button进行内容的拷贝, 节省一点时间, 以及了解实现的过程

2.学习/操作

1.文档阅读

https://wangdoc.com/javascript/dom/document.html

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/queryCommandEnabled

2.实践/使用

index.html

<!DOCTYPE html>

<html>

<head>

    <title>document 节点 - 复制内容</title>

</head>

<body>

    <div id=”target”>

        <input id=’content’ type=”text” name=”content” value=’这是要复制的内容~~’>

        <button id=”copy” type=”button” value=”Copy” >Copy</button>

    </div>

    <script>

        function copyText(dom) {

            var text = dom.value;

            dom.focus();

            dom.select();

            // 当前是否有选中文字

            var success = document.execCommand(‘copy’);

            if (success) {

                console.info(‘Copy Ok’);

            } else {

                console.error(‘Copy Fail!’);

            }

        }

        function doCopy(){

            //浏览器是否支持 copy 命令（选中内容复制到剪贴板）

            if (document.queryCommandSupported(‘copy’)) {

                var targetDom = document.getElementById(‘content’);

                copyText(targetDom);

            }else{

                console.error(‘浏览器不支持’);

            }

        }

        document.getElementById(“copy”).addEventListener(“click”, function(){

            // document.getElementById(“content”).value = ”Hello World”;

            doCopy();

        });

    </script>

</body>

</html>