复制textarea里输入的内容

迷南。 2022-09-06 00:08 147阅读 0赞

<html>
    
    <head>
        <title>Demo</title>
        <style>
            .textarea-container {
                position: relative;
                margin-left: 30%;
            }
    
            .textarea-container textarea {
                width: 50%;
                height: 50%;
                box-sizing: border-box;
            }
    
            .textarea-container button {
                position: absolute;
                bottom: 2%;
                right: 51%;
                font-size: 10px;
                width: 50px;
                line-height: 1.42857143;
                text-align: center;
                border: 1px solid transparent;
                border-radius: 25px;
            }
        </style>
    </head>
    
    <body>
        
        <div class="textarea-container">
            <textarea name="foo" id="write">请输入一些文字</textarea>
            <button  onclick="copy()">复制</button>
        </div>
        <script>
            function copyToClipboard(elem) {
                // create hidden text element, if it doesn't already exist
                var targetId = "_hiddenCopyText_";
                var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
                var origSelectionStart, origSelectionEnd;
                if (isInput) {
                    // can just use the original source element for the selection and copy
                    target = elem;
                    origSelectionStart = elem.selectionStart;
                    origSelectionEnd = elem.selectionEnd;
                } else {
                    // must use a temporary form element for the selection and copy
                    target = document.getElementById(targetId);
                    if (!target) {
                        var target = document.createElement("textarea");
                        target.style.position = "absolute";
                        target.style.left = "-9999px";
                        target.style.top = "0";
                        target.id = targetId;
                        document.body.appendChild(target);
                    }
                    target.textContent = elem.textContent;
                }
                // select the content
                var currentFocus = document.activeElement;
                target.focus();
                target.setSelectionRange(0, target.value.length);
    
                // copy the selection
                var succeed;
                try {
                    succeed = document.execCommand("copy");
                } catch (e) {
                    succeed = false;
                }
                // restore original focus
                if (currentFocus && typeof currentFocus.focus === "function") {
                    currentFocus.focus();
                }
    
                if (isInput) {
                    // restore prior selection
                    elem.setSelectionRange(origSelectionStart, origSelectionEnd);
                } else {
                    // clear temporary content
                    target.textContent = "";
                }
                return succeed;
            }
    
    
    function copy() {
        copyToClipboard(document.getElementById("write"));
        alert("复制成功！");
    }
    
        </script>
    </body>
    
    </html>

![f1c8ae6ffb089d970d540a92c1157576.png][]

[f1c8ae6ffb089d970d540a92c1157576.png]: /images/20220829/25fccc934e8445fba9a10d97e75a27b2.png