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

Question

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

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

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

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

有什么建议吗？有解决办法吗？

Answer 1

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

*更新：2018.12.24

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

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

——https://html.spec.whatwg.org/multipage/input.html#the-readonly-attribute

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

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

原答案

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

如果您想阻止用户更改字段的值，但您仍然希望他们能够读取它，和/或复制它的值，那么您应该使用readonly attribute。这将允许他们将焦点设置到元素（复制所必需的），并且还可以通过 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 />

Answer 2

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

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

你可以看到我对这个post的完整回复

Answer 3

您可以通过使用 jquery 的 contenteditable 属性在共享点中完成此操作，如下所示。

$("#fieldID").attr("contenteditable", "false");

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

Answer 4

请参阅我的帖子以解决相同的问题。它执行以下操作：

1. 在不使用输入标签上的只读属性的情况下使文本框像只读一样，但会尊重标签索引并设置焦点
2. 支持win和mac鼠标或键盘的所有剪贴板功能
3. 允许撤消、重做和全选

Restrict HTML input to only allow paste

Answer 5

我不喜欢使用 readonly="readonly"，永远。它使该字段可以通过 Tab 键获得焦点和访问，如果上帝禁止，用户在只读字段获得焦点时点击退格键，那么大多数浏览器将其视为用户点击“后退”按钮并调出以前浏览过的页面。 不是当您填写大型表单时，您希望看到的情况会发生，尤其是当您使用一些在您点击时不保留表单数据的过时浏览器时“下一步”按钮返回到它。在使用一些单页 Web 应用程序时也非常非常糟糕，“返回”会将您带到另一个世界，而“下一步”甚至不会恢复您的表单，更不用说它的数据了。

当我需要禁用字段（或 PRE 而不是 textarea）时，我通过呈现 DIV 而不是输入字段来解决此问题。动态执行并不总是那么容易，但我已经设法使用 AngularJS 模板完成了相当短的工作。

如果你有时间，head over to the Mozilla Bugzilla and ask them to fix it。

Answer 6

readonly="readonly" 将完成这项工作

主流浏览器应该是supported