CODEWITHSUNDEEP
javascript
SergioKastro
SergioKastro

Reputation: 875

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

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.

Firefox does not allow clipboard manipulation through JavaScript for valid security concerns.

Any suggestion? Is there a work around this?

Upvotes: 46

Views: 68645

Answers (6)

Trevor
Trevor

Reputation: 13457

tl;dr: Support for selecting and copying text in a disabled field is unreliable; use the readonly attribute or a non-input element, such as a <span> instead, if this functionality is necessary. Use JavaScript to modify the behavior of the readonly input to prevent unwanted behavior such as going back a page when someone hits the backspace key while the readonly input has focus.

*UPDATE: 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:

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

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.

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 readonly attribute. This will allow them to set focus to the element (necessary for copying), and also access the field via the tab button.

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 />

Upvotes: 6

dchang
dchang

Reputation: 1141

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

Upvotes: 3

Ron Miller
Ron Miller

Reputation: 23

You can accomplish this in share point by utilizing the contenteditable attribute as follows with jquery.

$("#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.

Upvotes: 0

Jim Dandy BOA
Jim Dandy BOA

Reputation: 600

Refer to my post to the same question. It does the following:

  1. Makes the textbox just like readonly without using the readonly attribute on the input tag, but will honor tab index and set focus
  2. Supports all clipboard functions win and mac with mouse or keyboard
  3. Allows undo, redo and select all

Restrict HTML input to only allow paste

Upvotes: 1

Derek
Derek

Reputation: 1606

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. Not what 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.

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.

If you have time, head over to the Mozilla Bugzilla and ask them to fix it.

Upvotes: 26

Teneff
Teneff

Reputation: 32158

readonly="readonly" will do the job

it should be supported by the major browsers

Upvotes: 49

Related Questions