Разрешить копирование / вставку в отключенном текстовом поле ввода в браузерах Firefox

Question

У меня отключено поле ввода:

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

В IE и в Chrome вы можете скопировать и вставить значение, заполненное в этом поле ввода, но в Firefox вы не можете.

Firefoxне допускает манипуляции с буфером обмена через JavaScript для обоснованных проблем безопасности.

Есть предложения?Есть ли работа вокруг этого?

Answer 1

readonly="readonly" сделает работу

он должен поддерживаться основными браузерами

Answer 2

Мне не нравится использовать readonly = "readonly", ever . Он оставляет поле фокусируемым и достижимым с помощью нажатия клавиши табуляции, и, если, не дай бог, пользователь нажимает клавишу возврата, в то время как поле «только для чтения» фокусируется, тогда большинство браузеров обрабатывают его так, как пользователь нажимает кнопку «назад» и вызывает ранее просмотренная страница. Не то, что вы хотите, чтобы происходило, когда вы заполняете большую форму, особенно если вы используете архаичный браузер, который не сохраняет данные формы при нажатии следующая кнопка, чтобы вернуться к нему. Также очень, очень плохо, когда вы используете какое-то одностраничное веб-приложение, где «назад» переносит вас в совершенно другой мир, а «следующий» даже не восстанавливает вашу форму, тем более ее данные.

Я работал над этим, отображая DIV вместо полей ввода, когда мне нужно отключить поле (или PRE вместо текстовой области). Не всегда это легко сделать динамически, но мне удалось довольно быстро справиться с этим с помощью шаблонов AngularJS.

Если у вас есть время, отправляйтесь в Mozilla Bugzilla и попросите их починить .

Answer 3

tl; dr: поддержка выбора и копирования текста в отключенном поле ненадежна;вместо этого используйте атрибут readonly или элемент, отличный от input, например <span>, если эта функциональность необходима.Используйте JavaScript, чтобы изменить поведение ввода readonly, чтобы предотвратить нежелательное поведение, такое как возврат назад страницы, когда кто-то нажимает клавишу backspace, когда ввод readonly имеет фокус.

* ОБНОВЛЕНИЕ: 2018.12.24

Спецификация изменилась с тех пор, как этот ответ был первоначально опубликован (спасибо Wrightboy за указание на это);теперь он включает следующее предупреждение относительно отключенных полей:

Любое другое поведение, связанное с взаимодействием пользователя с отключенными элементами управления, например, может ли текст быть выделен или скопирован, не определено в этом стандарте.

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

Отключенные поля по-прежнему не могут ни фокусировать, ни щелкать события.

Поскольку стандарт не определяет, может ли быть текст в отключенных элементах управлениявыбран или скопирован, и поскольку хотя бы один крупный браузер не поддерживает эту функцию, вероятно, лучше избегать такого поведения.

Оригинальный ответ

Этоожидаемое поведение для отключенного поля (по состоянию на исходную дату этого ответа).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 />

Answer 4

В качестве быстрого ответа, можно включить еще один не отключенный элемент для включения + копирования / вставки + повторного включения введенного вами текста, например:

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

Вы можете просмотреть мой полный ответ на этот пост

Answer 5

Обратитесь к моему посту на тот же вопрос.Он выполняет следующее:

1. Делает текстовое поле таким же, как только для чтения, без использования атрибута readonly на входном теге, но учитывает индекс табуляции и устанавливает фокус
2. Поддерживает все функции буфера обмена win иMac с мышью или клавиатурой
3. Позволяет отменить, повторить и выбрать все

Ограничить ввод HTML, чтобы разрешить только вставку

Answer 6

Вы можете сделать это в точке общего доступа, используя атрибут contenteditable следующим образом с jquery.

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

Это позволит пользователю выделить текст и скопировать его, но не позволит им вводить что-либо в поле.