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

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

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

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

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

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

Источник

6 ответов

Решение

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

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

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

Источник

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

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

Источник

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

Источник

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

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

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

Источник

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

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

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

Источник

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

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

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

Источник
Другие вопросы по тегам