Question

我正在处理跨浏览器问题：我有一个输入文本字段，它处于禁用模式。我想在双击时触发一个事件，并在启用模式下创建字段，但是在Firefox中双击时不会触发事件

在Chrome中：双击以下代码即可正常工作

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

但是对于Firefox，双击禁用的文本字段不会触发任何事件。

Answer 1

Firfox不会触发禁用元素的鼠标事件。您应该在其前面创建一个类似div的封面，然后双击该封面，然后将禁用的元素启用。

更新：在这里测试

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>

Answer 2

Firefox不允许与禁用的元素进行交互。您可以尝试的一种解决方案是在输入周围使用包装器div并处理其中的click事件。

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

双击时，事件无法在Firefox中的禁用输入文本字段上调用

2 个答案: