JavaScript .select() 不适用于 Chrome 中的 Webforms答案

【问题标题】：JavaScript .select() not working with Webforms in ChromeJavaScript .select() 不适用于 Chrome 中的 Webforms
【发布时间】：2018-01-03 12:55:46
【问题描述】：

我想使用 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 上运行良好。

【问题讨论】：

看不到任何 ID 为 MainContent_txtClientDetailsName 的输入字段。
感谢您的回复库马尔。它来自内容（添加到示例） - 当我查看源代码时，我可以看到它附加到 txtClientDetailsName 的开头。
阻止 mouseup 事件保持选择
您的视图是否有 ID MainContent_txtClientDetailsName 的输入类型？
@Kumar_Vikas 是的，我有<input name="ctl00$MainContent$txtClientDetailsName" type="text" value="Testing" readonly="readonly" id="MainContent_txtClientDetailsName" disabled="disabled" class="aspNetDisabled">

标签： javascript asp.net google-chrome webforms

【解决方案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>

【讨论】：

感谢 Hafiz，您的建议非常有效。我将问题缩小到Enabled="false" 属性，并按照您建议的通过代码临时删除属性的路线。

【解决方案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;
}

【讨论】：

感谢 Rahul 的建议，不幸的是它在阻止 onmouseup 事件后表现相同。
可能是浏览器缓存问题。请查看源代码，javascript是否更新
要测试你可以在 chrome 中打开 en.wikipedia.org/wiki/Main_Page，在控制台中请运行代码 document.getElementById("p-logo").onclick =function(event) { event.preventDefault(); var copyText = document.getElementById("searchInput"); copyText.onmouseup = function(){return false};复制文本.select(); document.execCommand("复制"); } 并且当您单击徽标时，您会发现搜索框已被选中
JavaScript 肯定已更新，已签入源代码。我刚刚尝试了您建议的上述测试，但这也不会更新我的剪贴板。
请在搜索框中输入一些内容然后才会被复制，默认文本仅为占位符