如何从浏览器将多个文本框中的值复制到剪贴板上？

问题描述：

我一直在尝试将多个文本框中的值复制到剪贴板上。

我尝试了什么：

我试过了document.execCommand（），但这只复制了所选的输入文本框。我无法选择多个文本框来复制到剪贴板。需要一些帮助。谢谢。

I have been trying to copy values from multiple textboxes onto clipboard.

What I have tried:

I have tried the document.execCommand(), but this copies only the selected input textbox. I am unable to select multiple textbox to copy to clipboard. Need some help on this. Thank you.

答

对于其他文本框，只需对一个文本框执行相同操作。

JavaScript示例：

Just do the same for other textboxes as you have done for one textbox.
Example with JavaScript:

window.clipboardData.setData('Text',document.getElementById('<%=TextBox1.ClientID%>').value + document.getElementById('<%=TextBox2.ClientID%>').value);

同样，你可以添加多个文本框值并在函数中调用这段代码。

希望，它有帮助：）

Similarly, you can add multiple textbox values and call this piece of code from within a function.
Hope, it helps :)

您可以创建一个临时元素并将最终文本放入其中，然后使用document.execCommand（）将最终文本放入剪贴板。像这样：

var text = text1 + text2 + text3;

copyTextToClipboard（text）;

You can create a temporary element and put your final Text in it and then use document.execCommand() to put that final text in Clipboard. like this:

var text = text1 + text2 + text3;
copyTextToClipboard(text);

function copyTextToClipboard(text) {
        var textArea = document.createElement("textarea");
        //
        // *** This styling is an extra step which is likely not required. ***
        //
        // Why is it here? To ensure:
        // 1. the element is able to have focus and selection.
        // 2. if element was to flash render it has minimal visual impact.
        // 3. less flakyness with selection and copying which **might** occur if
        //    the textarea element is not visible.
        //
        // The likelihood is the element won't even render, not even a flash,
        // so some of these are just precautions. However in IE the element
        // is visible whilst the popup box asking the user for permission for
        // the web page to copy to the clipboard.
        //

        // Place in top-left corner of screen regardless of scroll position.
        textArea.style.position = 'fixed';
        textArea.style.top = 0;
        textArea.style.left = 0;

        // Ensure it has a small width and height. Setting to 1px / 1em
        // doesn't work as this gives a negative w/h on some browsers.
        textArea.style.width = '2em';
        textArea.style.height = '2em';

        // We don't need padding, reducing the size if it does flash render.
        textArea.style.padding = 0;

        // Clean up any borders.
        textArea.style.border = 'none';
        textArea.style.outline = 'none';
        textArea.style.boxShadow = 'none';

        // Avoid flash of white box if rendered for any reason.
        textArea.style.background = 'transparent';


        textArea.value = text;

        document.body.appendChild(textArea);

        textArea.select();

        try {
            var successful = document.execCommand('copy');
        } catch (err) {
        }

        document.body.removeChild(textArea);
    }

此功能来自：如何用JavaScript复制到剪贴板？ - 堆栈溢出 [ ^ ]

< button type =buttonid =abc>复制< / button>

//考虑我们有多个文本框

< input id =a1type =text/>

< input id =a2type =text/>

< input id =a3type =text/>

< input id =aInfotype =textclass =hide/>

---------- --------------- Javascript -----------------

var copyBtn = document.querySelector（'＃abc'）;

copyBtn.addEventListener（'click'，function（）{

//'\ t是在文本和'aInfo'文本框之间添加空格，我删除了类'hide'，因为如果它隐藏了那么你就没有选择数据到剪贴板

<button type="button" id="abc">Copy</button>

// consider we have multiple Textboxes

<input id="a1" type="text" />
<input id="a2" type="text" />
<input id="a3" type="text" />
<input id="aInfo" type="text" class="hide"/>

-------------------------Javascript-----------------

var copyBtn = document.querySelector('#abc');

copyBtn.addEventListener('click', function () {

// '\t is to add space between texts and for 'aInfo' textbox, i am removing class 'hide' because if its hidden then you don't get selected data to clipboard

如何从浏览器将多个文本框中的值复制到剪贴板上？

相关推荐