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

Ответ 1

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

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

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

Ответ 2

readonly="readonly" выполнит задание

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

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