asp:textbox 通过单击按钮选择所有文本并复制到客户端剪贴板答案

【问题标题】：asp:textbox select all text by click button and copy to client clipboardasp:textbox 通过单击按钮选择所有文本并复制到客户端剪贴板
【发布时间】：2016-06-13 08:28:27
【问题描述】：

有什么方法可以选择多行 asp:textbox 中的所有文本并通过单击按钮将其复制到客户端剪贴板，使用 c#？

提前谢谢你。

【问题讨论】：

标签： c# asp.net textbox multiline

【解决方案1】：

您可以使用document.execCommand("copy");，但请注意，新浏览器大多支持此功能，据我所知不支持 Safari：

 <head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnCopy").click(function () {
                var id = "#" + "<%= txtText.ClientID %>";
                try {
                    $(id).select();
                    document.execCommand("copy");
                }
                catch (e) {
                    alert('Copy operation failed');
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="txtText" runat="server" Text="Some sample text to copy"></asp:TextBox>
        <button id="btnCopy">Copy</button>
    </form>
</body>

经过测试并适用于以下浏览器：

IE 11 及更高版本
谷歌浏览器 51.0.2704.84
火狐 43.0.1

【讨论】：

【解决方案2】：

我认为@Denis Wessels 的回答很棒，但使用纯文本区域而不是 asp:TextBox，因此我想编写自己的包含 asp:TextBox 控件。

假设您有一个带有 asp:TextBox 服务器控件的多行文本区域和一个用于将内容复制到剪贴板的按钮：

<asp:TextBox ID="TextArea" runat="server" TextMode="MultiLine">
<button id="copy">Copy to Clipboard</button>

使用jQuery和类似这样的JS函数：

<script type="text/javascript">
$(document).ready(function () {
        $("#copy").click(function() {
            // use ASP .NET ClientID if you don't sure
            // for ASP .NET 4.0 and above, set your ClientID with static mode
            var textarea = "<%= TextArea.ClientID %>"; 
            $(textarea).select();
            $(textarea).focus(); // set focus to this element first
            copyToClipboard(document.getElementById(textarea));
        });
});

function copyToClipboard(elem)
{
    var result;
    var target = elem;
    startPoint = elem.selectionStart;
    endPoint = elem.selectionEnd;

    var currentFocus = document.activeElement;
    target.setSelectionRange(0, target.value.length);

    try
    {
        // this may won't work on Safari
        result = document.execCommand("copy");
    }
    catch (e)
    {
        return alert("Copy to clipboard failed: " + e);
    }

    // returning original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }

    elem.setSelectionRange(startPoint, endPoint);

    return result;
}
</script>

有细微改动的参考：https://stackoverflow.com/a/22581382, https://stackoverflow.com/a/30905277

请注意，对于 ASP .NET 4 及更高版本，您可以设置静态 ClientID：

<asp:TextBox ID="TextArea" runat="server" TextMode="MultiLine" ClientID="TextArea" ClientIDMode="Static">

因此您可以直接使用$("#TextArea") 而不是$("<%= TextArea.ClientID %>")。

【讨论】：

【解决方案3】：

你可以使用这个类： System.Windows.Forms.Clipboard.SetText(..) textbox.Text 以从多行 asp.net 文本框中获取文本。

【讨论】：

【解决方案4】：

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<center>
  <p id="p1">Hello, I'm TEXT 1</p>
  <p id="p2">Hi, I'm the 2nd TEXT</p><br/>

  <button onclick="copyToClipboard('#p1')">Copy TEXT 1</button>
  <button onclick="copyToClipboard('#p2')">Copy TEXT 2</button>

  <br/><br/><input type="text" id="" placeholder="TEST it here;)" />
</center>

【讨论】：