允许在Firefox浏览器中的禁用输入文本框中复制/粘贴

Allow Copy/Paste in a disabled input text box in Firefox browsers

本文关键字：文本 输入 复制 粘贴 Firefox 浏览器      更新时间：2023-09-26

我禁用了一个输入文本框：

   <input type="text" name="name" disabled="disabled" />

在IE和Chrome中，你可以复制并粘贴输入字段中填充的值，但在Firefox中你不能。

出于安全考虑，Firefox不允许通过JavaScript操作剪贴板。

有什么建议吗？这方面有工作吗？

readonly="readonly"将完成的工作

主要浏览器应该支持它

我不喜欢使用readonly="readonly"，ever。它使字段可以通过tab键进行聚焦和访问，如果用户在只读字段聚焦时按下退格键，那么大多数浏览器将其视为用户按下"后退"按钮，并调出以前查看过的页面不是当你填写一个大表单时，你想看到的事情会发生，尤其是如果你使用的是一些过时的浏览器，当你点击"下一步"按钮返回表单时，它不会保存表单数据。当使用一些单页web应用程序时，情况也非常非常糟糕，"后退"会把你带到另一个世界，"下一个"甚至不会恢复你的表单，更不用说它的数据了。

当我需要禁用字段（或者PRE而不是文本区域）时，我通过渲染DIV而不是输入字段来解决这个问题。动态地做并不总是容易的，但我已经设法用AngularJS模板做了相当短的工作。

如果你有时间，可以去Mozilla Bugzilla，让他们修复它。

tl；dr：支持在禁用字段中选择和复制文本是不可靠的；如果需要此功能，请使用readonly属性或非input元素，例如<span>。使用JavaScript修改readonly输入的行为，以防止不必要的行为，例如当有人在readonly输入有焦点时点击backspace键时返回页面。

*更新：2018.12.24

自从这个答案最初发布以来，规范已经发生了变化（感谢Wrightboy指出这一点）；它现在包括以下关于禁用字段的警告：

本标准中未定义与禁用控件的用户交互相关的任何其他行为，例如是否可以选择或复制文本。

--https://html.spec.whatwg.org/multipage/input.html#the-只读属性

禁用的字段仍然无法接收焦点或单击事件。

因为该标准没有定义是否可以选择或复制禁用控件中的文本，而且至少有一个主要浏览器不支持该功能，所以最好避免依赖这种行为。

原始答案

这是禁用字段的预期行为（截至此答案的原始日期）。IE和Chrome都很慷慨，但Firefox的表现很得体。

如果希望防止用户更改字段的值，但仍然希望用户能够读取和/或复制字段的值时，则应使用readonly属性。这将允许他们将焦点设置为元素（复制所需），并通过tab按钮访问字段。

如果您担心用户意外点击只读字段内的退格按钮，导致浏览器导航回页面，您可以使用以下代码来防止这种行为：

document.addEventListener("DOMContentLoaded", function() {
  var inputs = document.querySelectorAll('[readonly]');
  for(var i=0; i < inputs.length; i++){
    inputs[i].addEventListener('keydown', function(e){
      var key = e.which || e.keyCode || 0;
      if(key === 8){
        e.preventDefault();
      }
    })
  }
});
<input value="Hello World" readonly=readonly />

作为快速答案，可以使用另一个未禁用的元素来启用+复制/粘贴+重新显示输入文本，如下所示：

$('#btnCopy').click(function(){
   $('#txtInputDisabled').removeAttr('disabled');  
   $('#txtInputDisabled').select();
   document.execCommand("copy");
   $('#txtInputDisabled').attr('disabled','disabled');  
});

你可以看到我对这篇文章的完整回应

请参阅我的帖子，回答同样的问题。它执行以下操作：

  1. 在不使用input标记上的readonly属性的情况下，使文本框与readonly类似，但将尊重选项卡索引并设置焦点
  2. 支持所有剪贴板功能win和mac与鼠标或键盘
  3. 允许撤消、重做和全选

将HTML输入限制为只允许粘贴

您可以在共享点中通过jquery使用如下内容可编辑属性来实现这一点。

$（"#fieldID"）.attr（"contenteditable"，"false"）；

这将允许用户突出显示文本并复制它，但不允许他们在字段中输入任何内容。

相关文章：