禁用输入上的事件

javascript jquery html

2022-08-30 00:25:30

显然，禁用不被任何事件处理<input>

有没有办法解决这个问题？

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

$(':input').click(function () {
    $(this).removeAttr('disabled');
})

在这里，我需要单击输入以启用它。但是，如果我不激活它，则不应发布输入。

答案 1

禁用的元素不会触发鼠标事件。大多数浏览器会将源自禁用元素的事件传播到 DOM 树上，因此事件处理程序可以放在容器元素上。但是，Firefox不会表现出这种行为，当您单击禁用的元素时，它根本不会执行任何操作。

我想不出更好的解决方案，但是，为了实现完全的跨浏览器兼容性，您可以在禁用的输入前面放置一个元素，并捕获对该元素的单击。以下是我的意思的一个例子：

<div style="display:inline-block; position:relative;">
  <input type="text" disabled />
  <div style="position:absolute; left:0; right:0; top:0; bottom:0;"></div>
</div>

jq：

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});

示例：http://jsfiddle.net/RXqAm/170/（更新为使用 jQuery 1.7 而不是）。propattr

答案 2

禁用的元素在某些浏览器中会“吃掉”点击 - 它们既不响应它们，也不允许元素或其任何容器上的任何事件处理程序捕获它们。

恕我直言，“修复”这个问题的最简单，最干净的方法（如果你确实需要像OP一样捕获对禁用元素的点击）只是将以下CSS添加到你的页面：

input[disabled] {pointer-events:none}

这将使对禁用输入的任何单击都落入父元素，您可以在其中正常捕获它们。（如果您有多个禁用的输入，则可能需要将每个输入放入自己的单个容器中，如果它们尚未以这种方式布局 - 一个额外的或一个，例如 - 只是为了便于区分单击了哪个禁用的输入）。<span><div>

缺点是，不幸的是，这个技巧不适用于不支持CSS属性的旧浏览器。（它应该可以从IE 11，FF v3.6，Chrome v4开始工作）：caniuse.com/#search=pointer-eventspointer-events

如果您需要支持较旧的浏览器，则需要使用其他答案之一！