Javascript 禁用输入上的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3100319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Event on a disabled input
提问by Pierre de LESPINAY
Apparently a disabled <input>is not handled by any event
显然<input>，任何事件都不会处理残疾人
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.
在这里，我需要单击输入以启用它。但是，如果我不激活它，则不应发布输入。
回答by Andy E
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.
禁用的元素不会触发鼠标事件。大多数浏览器会将源自禁用元素的事件沿 DOM 树向上传播，因此事件处理程序可以放置在容器元素上。但是，Firefox 不会表现出这种行为，当您单击禁用的元素时，它什么也不做。
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:
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 propinstead of attr).
示例：http: //jsfiddle.net/RXqAm/170/（更新为使用 jQuery 1.7prop代替 attr）。
回答by Tokimon
Maybe you could make the field readonly and on submit disable all readonly fields
也许您可以将该字段设为只读并在提交时禁用所有只读字段
$(".myform").submit(function(e) {
$("input[readonly]", this).attr("disabled", true);
});
and the input (+ script) should be
并且输入（+脚本）应该是
<input type="text" readonly="readonly" name="test" value="test" />
$('input[readonly]').click(function () {
$(this).removeAttr('readonly');
})
回答by Doin
Disabled elements "eat" clicks in some browsers - they neither respond to them, nor allow them to be captured by event handlers anywhere on either the element or any of its containers.
禁用元素在某些浏览器中“吃掉”点击——它们既不响应它们，也不允许它们被元素或其任何容器上的任何位置的事件处理程序捕获。
IMHO the simplest, cleanest way to "fix" this (if you do in fact need to capture clicks on disabled elements like the OP does) is just to add the following CSS to your page:
恕我直言，“修复”此问题的最简单、最干净的方法（如果您确实需要像 OP 那样捕获对禁用元素的点击）只是将以下 CSS 添加到您的页面：
input[disabled] {pointer-events:none}
This will make any clicks on a disabled input fall through to the parent element, where you can capture them normally. (If you have several disabled inputs, you might want to put each into an individual container of its own, if they aren't already laid out that way - an extra <span>or a <div>, say - just to make it easy to distinguish which disabled input was clicked).
这将使对禁用输入的任何点击都落入父元素，在那里您可以正常捕获它们。（如果您有多个禁用的输入，您可能希望将每个放入一个单独的容器中，如果它们还没有以这种方式布置 - 一个额外的<span>或一个<div>，比如说 - 只是为了便于区分哪个禁用的输入被点击）。
The downside is that this trick unfortunately won't works for older browsers that don't support the pointer-eventsCSS property. (It should work from IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events
缺点是不幸的是，这个技巧不适用于不支持pointer-eventsCSS 属性的旧浏览器。（它应该适用于 IE 11、FF v3.6、Chrome v4）：caniuse.com/#search=pointer-events
If you need to support older browsers, you'll need to use one of the other answers!
如果您需要支持较旧的浏览器，则需要使用其他答案之一！
回答by Ron Reiter
I would suggest an alternative - use CSS:
我会建议一个替代方案 - 使用 CSS：
input.disabled {
user-select : none;
-moz-user-select : none;
-webkit-user-select : none;
color: gray;
cursor: pointer;
}
instead of the disabled attribute. Then, you can add your own CSS attributes to simulate a disabled input, but with more control.
而不是禁用属性。然后，您可以添加自己的 CSS 属性来模拟禁用的输入，但具有更多控制权。
回答by Rejeesh Prarath
$(function() {
$("input:disabled").closest("div").click(function() {
$(this).find("input:disabled").attr("disabled", false).focus();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div>
<input type="text" disabled />
</div>回答by Nykac
Instead of disabled, you could consider using readonly. With some extra CSS you can style the input so it looks like an disabledfield.
相反disabled，您可以考虑使用readonly. 使用一些额外的 CSS，您可以设置输入的样式，使其看起来像一个disabled字段。
There is actually another problem. The event changeonly triggers when the element looses focus, which is not logic considering an disabledfield. Probably you are pushing data into this field from another call. To make this work you can use the event 'bind'.
其实还有一个问题。该事件change仅在元素失去焦点时触发，这不是考虑disabled字段的逻辑。可能您正在将数据从另一个调用推送到该字段。要完成这项工作，您可以使用事件“绑定”。
$('form').bind('change', 'input', function () {
console.log('Do your thing.');
});
回答by sidonaldson
OR do this with jQuery and CSS!
或者用 jQuery 和 CSS 做到这一点！
$('input.disabled').attr('ignore','true').css({
'pointer-events':'none',
'color': 'gray'
});
This way you make the element look disabled and no pointer events will fire, yet it allows propagation and if submitted you can use the attribute 'ignore' to ignore it.
通过这种方式，您可以使元素看起来被禁用，并且不会触发指针事件，但它允许传播，如果提交，您可以使用属性“忽略”来忽略它。
回答by Raul Sanchez
We had today a problem like this, but we didn't wanted to change the HTML. So we used mouseenterevent to achieve that
我们今天遇到了这样的问题，但我们不想更改 HTML。所以我们使用mouseenter事件来实现
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');
回答by npth
I find another solution:
我找到了另一个解决方案：
<input type="text" class="disabled" name="test" value="test" />
Class "disabled" immitate disabled element by opacity:
“禁用”类通过不透明度模拟禁用元素：
<style type="text/css">
input.disabled {
opacity: 0.5;
}
</style>
And then cancel the event if element is disabled and remove class:
如果元素被禁用并删除类，则取消事件：
$(document).on('click','input.disabled',function(event) {
event.preventDefault();
$(this).removeClass('disabled');
});
回答by katzmopolitan
suggestion here looks like a good candidate for this question as well
这里的建议看起来也很适合这个问题
Performing click event on a disabled element? Javascript jQuery
在禁用的元素上执行单击事件？Javascript jQuery
jQuery('input#submit').click(function(e) {
if ( something ) {
return false;
}
});
