禁用输入上的事件 [英] Event on a disabled input

问题描述

显然已禁用的 不会被任何事件处理

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

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

在这里，我需要点击输入来启用它.但是如果我不激活它，输入应该不会被发布.

解决方案

禁用的元素不会触发鼠标事件.大多数浏览器会将源自禁用元素的事件沿 DOM 树向上传播，因此可以将事件处理程序放置在容器元素上.但是，Firefox 不会表现出这种行为，当您单击禁用的元素时，它什么也不做.

我想不出更好的解决方案，但为了完全跨浏览器兼容性，您可以在禁用输入的前面放置一个元素，然后点击该元素.这是我的意思的一个例子:

<input type="text" 禁用/><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/(更新为使用 jQuery1.7 使用 prop 而不是 attr).

Apparently a disabled <input> is not handled by any event

Is there a way to work around this issue ?

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

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

Here, I need to click on the input to enable it. But if I don't activate it, the input should not be posted.

解决方案

Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements. However, Firefox doesn't exhibit this behaviour, it just does nothing at all when you click on a disabled element.

I can't think of a better solution but, for complete cross browser compatibility, you could place an element in front of the disabled input and catch the click on that element. Here's an example of what I mean:

<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();
});​

Example: http://jsfiddle.net/RXqAm/170/ (updated to use jQuery 1.7 with prop instead of attr).

这篇关于禁用输入上的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！