复制textarea里输入的内容 

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

 

 

posted @ 2021-08-18 09:00  木子欢儿  阅读(70)  评论(0)  编辑  收藏  举报