JavaScript .select（）无法在Chrome中使用Webforms

Question

我想使用JavaScript将文本从网页复制到剪贴板，但是.select（）在Chrome（版本63）中不起作用。

代码如下：

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
    function preventDefault(event)
    {
        event.preventDefault();

        var copyText = document.getElementById("MainContent_txtClientDetailsName");
        copyText.select();
        document.execCommand("Copy");

        return false;
    }
</script>

<p id="nameTag">Name: </p>
<asp:Label ID="lblClientDetailsName" runat="server" autopostback="false"></asp:Label>
<asp:TextBox ID="txtClientDetailsName" runat="server" ReadOnly="true" Enabled="false">Testing</asp:TextBox>
<asp:LinkButton ID="btnCopyTitle" runat="server" OnClientClick="preventDefault(event)" CssClass="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-copy"></span>
</asp:LinkButton>
</asp:Content>

我已经在Edge中尝试过，它的工作非常完美。在线搜索建议调用copyText.focus（），但这也不起作用。

该代码基本上是https://www.w3schools.com/howto/howto_js_copy_clipboard.asp的w3schools指南的副本，可以在Chrome上正常运行。

Answer 1

您的代码很好，问题是当您在webform中禁用文本框时禁用文本框copyText.select();无法正常工作删除这些属性ReadOnly="true" Enabled="false"它可以正常使用现有代码如果您不想删除这些属性然后使用js方法下面它适合您。

<script>
function preventDefault(event) {
    var copyText = document.getElementById("<%=txtClientDetailsName.ClientID%>");
    $(copyText).removeAttr('ReadOnly Enabled disabled')
    $(copyText).removeClass('aspNetDisabled')

  copyText.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.value);
  $(copyText).attr({
      ReadOnly:"true",
      disabled:"disabled",
  })
  $(copyText).addClass('aspNetDisabled')
  event.preventDefault();
}
    </script>

Answer 2

在chrome中我们有这个已知的问题，我们必须禁用onmouseup事件来保持选择。

function preventDefault(event)
{
  event.preventDefault();
  var copyText = document.getElementById("MainContent_txtClientDetailsName");
  copyText.onmouseup = function(){return false};
  copyText.select();
  document.execCommand("copy");
  return false;
}