Javascript 禁用输入上的事件

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

有办法解决这个问题吗

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

---

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

禁用的元素不会触发鼠标事件。大多数浏览器都会将源于禁用元素的事件传播到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>​

---

示例：（更新为将jQuery 1.7与

prop

一起使用，而不是

attr

）。

也许您可以将字段设置为只读，并在提交时禁用所有只读字段

$（“.myform”）.submit（函数（e）{
$（“输入[只读]”）.prop（“禁用”，true）；
});

输入（+脚本）应该是

$（'input[readonly]'）。单击（函数（）{
$（this.removeAttr（'readonly'）；
});

一个活生生的例子：

$（“.myform”）.submit（函数（e）{
$（“输入[只读]”）.prop（“禁用”，true）；
e、 预防默认值（）；
});
$（'.reset'）。单击（函数（）{
$（“输入[只读]”）.prop（“禁用”，false）；
})
$（'input[readonly]'）。单击（函数（）{
$（this.removeAttr（'readonly'）；
})

输入[只读]{
颜色：灰色；
边框颜色：当前颜色；
}

提交
重置

这里的建议看起来也是这个问题的一个很好的候选人

---

我建议另一种选择——使用CSS：

input.disabled {
    user-select : none;
    -moz-user-select : none;
    -webkit-user-select : none;
    color: gray;
    cursor: pointer;
}

---

而不是禁用的属性。然后，您可以添加自己的CSS属性来模拟禁用的输入，但需要更多的控制。

或者使用jQuery和CSS来实现这一点

$('input.disabled').attr('ignore','true').css({
    'pointer-events':'none',
     'color': 'gray'
});

这样可以使元素看起来被禁用，不会触发指针事件，但它允许传播，如果提交，可以使用“忽略”属性忽略它。

$（函数（）{
$（“输入：禁用”）。最近的（“div”）。单击（函数（）{
$（this）.find（“输入：禁用”）.attr（“禁用”，false）.focus（）；
});
});

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

IMHO“修复”此问题的最简单、最干净的方法（如果您确实需要像OP一样捕获对禁用元素的点击）就是将以下CSS添加到您的页面：

input[disabled] {pointer-events:none}

这将使对禁用输入的任何单击都转到父元素，您可以在父元素中正常捕获它们。（如果您有多个禁用的输入，您可能希望将每个输入放在一个单独的容器中，如果它们还没有按这种方式排列，比如说，一个额外的
或一个
，以便于区分单击了哪个禁用的输入）


缺点是，不幸的是，对于不支持
指针事件
CSS属性的旧浏览器，这种技巧不起作用。（它应该从IE 11、FF v3.6、Chrome v4开始工作）：

如果您需要支持较旧的浏览器，则需要使用其他答案之一
 我找到了另一个解决方案：

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

而不是<代码>禁用< /代码>，您可以考虑使用<代码> Read Ong//C>。通过一些额外的CSS，您可以设置输入的样式，使其看起来像一个禁用的
字段

实际上还有一个问题。事件
change
仅在元素失去焦点时触发，考虑到
已禁用
字段，这不是逻辑。可能您正在从另一个调用将数据推入此字段。要使其工作，可以使用事件“bind”

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});

我们今天遇到了这样的问题，但我们不想更改HTML。所以我们用事件来实现这一点

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');

小事情：如果您使用的是没有值的
disabled
属性，这意味着HTML而不是XHTML，在这种情况下，结束斜杠是不必要的。@Tim:确实不必要，但它仍然是有效的HTML。这只是习惯的力量，我觉得它看起来更好。谢谢安迪，这很聪明。难道没有更简单的吗？你知道为什么去除数据的输入不可处理吗？这是没有意义的：任何其他html元素都可以处理鼠标事件，为什么不是禁用的元素（例如
mouseenter
，等等）。你可以通过在CSS中放入
input[disabled]{pointer events:none}
来阻止禁用的元素“扔掉”你的点击。然后单击的行为就好像单击了父元素一样。这是最简单、最干净的解决方案，但不幸的是，它只适用于支持
指针事件
CSS属性：+1的浏览器，这是一个不错的替代建议。唯一的缺点是，输入框不会采用禁用的样式，这在不同的浏览器中有所不同，因此很难使其与用户对禁用输入的期望保持一致。true。也许这可以通过CSS解决？但是是的，它的外观与普通的diabled input fieldsExcellent替代解决方案不同。我更喜欢这一个，因为你可以用CSS做任何必要的样式（例如，使它看起来被禁用），但仍然有可用的事件。这正是我所需要的！仅适用于ie10，太多用户使用ie9/8。因此，这不是一个可靠的替代方案。这仍然会导致在提交表单时发布字段，这在许多情况下是不可取的。这里是一个很好的替代方案，您可以使用CSS假装禁用并在onSubmit处理程序中循环输入，真正禁用未激活的。只是给读者一个小提示：如果您不介意发布输入，请使用
readonly
而不是
disabled
。我知道这不是OP所问的而是一些问题
<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

$(document).on('click','input.disabled',function(event) {
    event.preventDefault();
    $(this).removeClass('disabled');
});

$('form').bind('change', 'input', function () {
    console.log('Do your thing.');
});

var doThingsOnClick = function() {
    // your click function here
};

$(document).on({
    'mouseenter': function () {
        $(this).removeAttr('disabled').bind('click', doThingsOnClick);
    },
    'mouseleave': function () {
        $(this).unbind('click', doThingsOnClick).attr('disabled', 'disabled');
    },
}, 'input.disabled');