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

查看:124
本文介绍了禁用输入的事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

显然一个禁用的< input> 不会被任何事件处理



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

 < input type =textdisabled =disabledname =testvalue =test /> 



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

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

解决方案

禁用的元素不会触发鼠标事件。大多数浏览器会将源自禁用元素的事件传播到DOM树上,因此事件处理程序可以放置在容器元素上。然而,Firefox并没有出现这种行为,当你点击一个禁用的元素时,它什么也不做。



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

 < div style =display:inline-block; position:relative;> ; 
< input type =textdisabled />
< 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,false).focus();
});

示例: http://jsfiddle.net/RXqAm/170/ (已更新至使用jQuery 1.7和 prop 而不是 attr )。


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

Is there a way to workaround 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆