Javascript 允许在 Firefox 浏览器中禁用的输入文本框中复制/粘贴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8876928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Allow Copy/Paste in a disabled input text box in Firefox browsers
提问by SergioKastro
I have a input text box disabled:
我禁用了输入文本框：
<input type="text" name="name" disabled="disabled" />
In IE and in Chrome you can copy and paste the value populated in that input field but in Firefox you cannot.
在 IE 和 Chrome 中，您可以复制并粘贴在该输入字段中填充的值，但在 Firefox 中则不能。
Firefox does not allow clipboard manipulation through JavaScript for valid security concerns.
出于有效的安全考虑，Firefox 不允许通过 JavaScript 操作剪贴板。
Any suggestion? Is there a work around this?
有什么建议吗？有解决这个问题的方法吗？
采纳答案by Derek
I don't like using readonly="readonly", ever. It leaves the field focusable and reachable via tab keypress and, if, god forbid, the user hits the backspace key while the read-only field is focused, then most browsers treat it like the user hit the 'back' button and bring up the previously viewed page. Notwhat you want to see happen when you're filling out a large form, especially if you are using some archaic browser that doesn't preserve the form data when you hit the 'next' button to return to it. Also very, very bad when using some single-page web application, where 'back' takes you to a whole other world, and 'next' doesn't even restore your form, much less its data.
我不喜欢使用 readonly="readonly", ever。它使该字段可通过 Tab 键获得焦点和可达，如果上帝保佑，用户在只读字段聚焦时点击退格键，那么大多数浏览器将其视为用户点击“后退”按钮并调出以前查看的页面。 当您填写大型表单时，这不是您希望看到的情况，尤其是当您使用一些陈旧的浏览器时，当您点击“下一步”按钮返回表单数据时，这些浏览器不会保留表单数据。在使用某些单页 Web 应用程序时也非常非常糟糕，其中“返回”将您带到另一个世界，而“下一个”甚至不会恢复您的表单，更不用说它的数据了。
I've worked around this by rendering DIVs instead of input fields when I need the field disabled (or PRE instead of a textarea). Not always easy to do dynamically but I've managed to make fairly short work of it with AngularJS templates.
当我需要禁用字段（或 PRE 而不是 textarea）时，我通过渲染 DIV 而不是输入字段来解决这个问题。动态执行并不总是那么容易，但我已经设法使用 AngularJS 模板对其进行了相当短的工作。
If you have time, head over to the Mozilla Bugzilla and ask them to fix it.
如果您有时间，请前往 Mozilla Bugzilla 并要求他们修复它。
回答by Teneff
回答by Trevor
tl;dr: Support for selecting and copying text in a disabled field is unreliable; use the readonlyattribute or a non-inputelement, such as a <span>instead, if this functionality is necessary. Use JavaScript to modify the behavior of the readonlyinput to prevent unwanted behavior such as going back a page when someone hits the backspacekey while the readonlyinput has focus.
tl;dr：支持在禁用字段中选择和复制文本是不可靠的；如果需要此功能，请使用readonly属性或非input元素，例如 a<span>代替。使用 JavaScript 修改readonly输入的行为，以防止出现不需要的行为，例如当有人backspace在readonly输入具有焦点时按下键时返回页面。
*UPDATE: 2018.12.24
*更新：2018.12.24
The spec has changed since this answer was originally posted (thanks to Wrightboy for pointing this out); it now includes the following caveat with regards to disabled fields:
自从这个答案最初发布以来，规范已经发生了变化（感谢 Wrightboy 指出这一点）；它现在包括以下有关禁用字段的警告：
Any other behavior related to user interaction with disabled controls, such as whether text can be selected or copied, is not defined in this standard.
— https://html.spec.whatwg.org/multipage/input.html#the-readonly-attribute
本标准未定义与用户与禁用控件交互相关的任何其他行为，例如是否可以选择或复制文本。
— https://html.spec.whatwg.org/multipage/input.html#the-readonly-attribute
Disabled fields still cannot receive focus nor click events.
禁用的字段仍然无法接收焦点或单击事件。
Because the standard does not define whether or not text within disabled controls can be selected or copied and because at least one major browser doesn't support that functionality, it's probably best to avoid relying on that behavior.
因为该标准没有定义是否可以选择或复制禁用控件中的文本，并且因为至少有一个主要浏览器不支持该功能，所以最好避免依赖该行为。
Original Answer
原答案
This is the expected behavior for a disabled field (as of the original date of this answer). IE and Chrome are being generous, but Firefox is behaving appropriately.
这是禁用字段的预期行为（截至本答案的原始日期）。IE 和 Chrome 很慷慨，但 Firefox 表现得恰到好处。
If you want to prevent the user from changing the value of the field, but you still want them to be able to read it, and/or copy it's value, then you should use the readonlyattribute. This will allow them to set focus to the element (necessary for copying), and also access the field via the tabbutton.
如果您想阻止用户更改字段的值，但您仍然希望他们能够读取它，和/或复制它的值，那么您应该使用readonly属性。这将允许他们将焦点设置到元素（复制所必需的），并且还可以通过tab按钮访问该字段。
If you are concerned about a user accidentally hitting the backspace button inside the readonly field and causing the browser to navigate back a page, you can use the following code to prevent that behavior:
如果您担心用户不小心点击了只读字段内的退格按钮并导致浏览器返回页面，您可以使用以下代码来防止这种行为：
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 />回答by dchang
As quick answer, one can have another not disabled element to enable + copy/paste + redisable your input text, like this:
作为快速回答，您可以使用另一个未禁用的元素来启用 + 复制/粘贴 + 重新禁用您的输入文本，如下所示：
$('#btnCopy').click(function(){
$('#txtInputDisabled').removeAttr('disabled');
$('#txtInputDisabled').select();
document.execCommand("copy");
$('#txtInputDisabled').attr('disabled','disabled');
});
You can se my complete response to this post
你可以看到我对这篇文章的完整回复
回答by Larry Robertson
Refer to my post to the same question. It does the following:
同样的问题，请参考我的帖子。它执行以下操作：
- Makes the textbox just like readonly without using the readonly attribute on the input tag, but will honor tab index and set focus
- Supports all clipboard functions win and mac with mouse or keyboard
- Allows undo, redo and select all
- 在输入标签上不使用 readonly 属性的情况下，使文本框就像 readonly 一样，但会尊重标签索引并设置焦点
- 使用鼠标或键盘支持所有剪贴板功能 win 和 mac
- 允许撤消、重做和全选
回答by Ron Miller
You can accomplish this in share point by utilizing the contenteditable attribute as follows with jquery.
您可以通过在 jquery 中使用 contenteditable 属性在共享点中完成此操作，如下所示。
$("#fieldID").attr("contenteditable", "false");
$("#fieldID").attr("contenteditable", "false");
This will allow the user to highlight the text and copy it but will not allow them to enter anything in the field.
这将允许用户突出显示文本并复制它，但不允许他们在字段中输入任何内容。
