2024-08-28 05:00:04

事件

显然,一个被禁用的<input>没有被任何事件处理

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

<input type="text" disabled="disabled" name="test" value="test" />
$(':input').click(function () {
    $(this).removeAttr('disabled');
})

在这里,我需要单击输入来启用它。但是如果我不激活它,输入就不会被发布。


当前回答

我会建议一个替代方案-使用CSS:

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

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

其他回答

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

恕我直言,最简单、最干净的“修复”这个问题的方法(如果你确实需要像OP那样捕捉禁用元素的点击)就是向你的页面添加以下CSS:

input[disabled] {pointer-events:none}

这将使对禁用输入的任何单击都传递到父元素,在父元素中您可以正常捕获它们。(如果您有几个禁用的输入,您可能希望将每个输入放入单独的容器中,如果它们还没有这样布局的话—例如,一个额外的<span>或<div>—只是为了便于区分单击了哪个禁用的输入)。


不幸的是,这个技巧不适用于不支持指针事件CSS属性的旧浏览器。(它应该工作在IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

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

或者用jQuery和CSS做这个!

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

这样你可以让元素看起来是禁用的,没有指针事件会被触发,但它允许传播,如果提交,你可以使用属性'ignore'来忽略它。

您可以考虑使用readonly而不是disabled。使用一些额外的CSS,您可以对输入设置样式,使其看起来像一个禁用字段。

实际上还有另一个问题。事件更改仅在元素失去焦点时触发,考虑到禁用字段,这不是逻辑。可能您正在将数据从另一个调用推入该字段。要做到这一点,你可以使用事件'bind'。

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

我做了和Andy E非常相似的事情;只是我用了一个环绕标签。然而,我需要“名称”,所以我把它改成了一个没有“href”的标签。

这里的建议看起来也很适合回答这个问题

在禁用元素上执行单击事件?Javascript jQuery

jQuery('input#submit').click(function(e) {
    if ( something ) {        
        return false;
    } 
});