如何使用jquery复制到具有多个按钮ID的剪贴板

时间:2016-04-05 07:24:02

标签: javascript jquery html html5 xhtml

我正在尝试复制剪贴板onclick事件上的数据,但我无法为多个输入ID执行此操作。这是我的代码和参考stackoverflow网址: Using execCommand (Javascript) to copy hidden text to clipboard

我的请求代码是:

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  id="copy-me" value="mohit text" type="text" class="copy">
<button id="copy-btn" onclick="idname(this.id, 'copy-me')">Copy</button><br><br>
<input id="copy-me1" value="mohit text2" type="text" class="copy">
<button id="copy-btn1" onclick="idname(this.id, 'copy-me')">Copy</button><br><br>
<input id="copy-me2" value="mohit text3" type="text" class="copy">
<button id="copy-btn2" onclick="idname(this.id, 'copy-me')">Copy</button><br><br>
<textarea placeholder="paste here"></textarea>
<script type="text/javascript">
    function idname(a, b)
    {
        alert(a);
        var copyBtn = $(a),
                input = $(b);
        copyBtn.on('click', copyToClipboard);
        function copyToClipboardFF(text) {
            window.prompt("Copy to clipboard: Ctrl C, Enter", text);
        }
        function copyToClipboard() {
            var success = true,
                    range = document.createRange(),
                    selection;
            // For IE.
            if (window.clipboardData) {
                window.clipboardData.setData("Text", input.val());
            } else {
                // Create a temporary element off screen.
                var tmpElem = $('<div>');
                tmpElem.css({
                    position: "absolute",
                    left: "-1000px",
                    top: "-1000px",
                });
                // Add the input value to the temp element.
                tmpElem.text(input.val());
                $("body").append(tmpElem);
                // Select temp element.
                range.selectNodeContents(tmpElem.get(0));
                selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                // Lets copy.
                try {
                    success = document.execCommand("copy", false, null);
                }
                catch (e) {
                    copyToClipboardFF(input.val());
                }
                if (success) {
                    alert("The text is on the clipboard, try to paste it!");
                    // remove temp element.
                    tmpElem.remove();
                }
            }
        }
    }

</script>

1 个答案:

答案 0 :(得分:1)

以这种方式尝试(不需要额外的包装函数idname):

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input  id="copy-me" value="mohit text" type="text" class="copy">
<button id="copy-btn" onclick="copyToClipboard('#copy-me')">Copy</button><br><br>
<input id="copy-me1" value="mohit text2" type="text" class="copy">
<button id="copy-btn1" onclick="copyToClipboard('#copy-me1')">Copy</button><br><br>
<input id="copy-me2" value="mohit text3" type="text" class="copy">
<button id="copy-btn2" onclick="copyToClipboard('#copy-me2')">Copy</button><br><br>
<textarea placeholder="paste here"></textarea>
<script type="text/javascript">

       function copyToClipboardFF(text) {
            window.prompt("Copy to clipboard: Ctrl C, Enter", text);
        }

        function copyToClipboard(inputId) {
        var input = $(inputId);
            var success = true,
                    range = document.createRange(),
                    selection;
            // For IE.
            if (window.clipboardData) {
                window.clipboardData.setData("Text", input.val());
            } else {
                // Create a temporary element off screen.
                var tmpElem = $('<div>');
                tmpElem.css({
                    position: "absolute",
                    left: "-1000px",
                    top: "-1000px",
                });
                // Add the input value to the temp element.
                tmpElem.text(input.val());
                $("body").append(tmpElem);
                // Select temp element.
                range.selectNodeContents(tmpElem.get(0));
                selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                // Lets copy.
                try {
                    success = document.execCommand("copy", false, null);
                }
                catch (e) {
                    copyToClipboardFF(input.val());
                }
                if (success) {
                    alert("The text is on the clipboard, try to paste it!");
                    // remove temp element.
                    tmpElem.remove();
                }
            }
        }

</script>