При двойном щелчке событие не получает вызов в отключенном текстовом поле ввода в Firefox

Question

Я работаю над кросс-браузерной проблемой: - У меня есть одно поле ввода текста, и оно в отключенном режиме.я хочу запустить событие по двойному щелчку и сделать поле в активированном режиме, но событие не запускается при двойном щелчке в Firefox

в Chrome: код ниже работает нормально при двойном щелчке

document.addEventListener("dblclick", this.editInputField); 

, но для Firefox ни одно событие не срабатывает при двойном щелчке на отключенном текстовом поле.

Answer 1

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

<div ondbclick="activateInput">
    <input disabled type="text">
</div>

Answer 2

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

ОБНОВЛЕНИЕ: Протестируйте здесь

var inp = document.querySelector('.myInput');
inp.nextElementSibling.addEventListener('dblclick', function () {
  inp.removeAttribute('disabled');
  inp.focus();
});

input[disabled] + .cover {
  display: block;
}

.cover {
  margin: 5px;
  width: 150px;
  height: 25px;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}

<div>
  <input class="myInput" disabled/>
  <div class="cover"></div>
</div>