禁用输入的事件

Question

显然<input>,任何事件都不会处理残疾人

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

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

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

在这里,我需要单击输入以启用它.但如果我不激活它,则不应发布输入.

Answer 1

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

JQ:

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});?

示例:http://jsfiddle.net/RXqAm/170/(更新为使用jQuery 1.7 prop代替 attr).

Answer 2

也许你可以只读取字段并在提交时禁用所有只读字段

$(".myform").submit(function(e) {
    $("input[readonly]", this).attr("disabled", true);
});

输入(+脚本)应该是

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

$('input[readonly]').click(function () {
    $(this).removeAttr('readonly');
})

Answer 3

禁用元素在某些浏览器中"吃掉"点击 - 它们既不响应它们,也不允许它们被元素或其任何容器上的任何地方的事件处理程序捕获.

恕我直言"最简单,最干净"的方法来"修复"这个(如果你确实需要捕获像OP这样的禁用元素的点击)只是将以下CSS添加到你的页面:

input[disabled] {pointer-events:none}

这将使对禁用输入的任何点击都会降低到父元素,您可以在其中正常捕获它们.(如果你有几个禁用的输入,你可能想把它们放入一个单独的容器中,如果它们还没有这样布局 - 一个额外的<span>或者<div>说,比如说 - 只是为了便于区分哪个禁用的输入点击了).

缺点是遗憾的是,这个技巧不适用于不支持pointer-eventsCSS属性的旧浏览器.它应该适用于IE 11,FF v3.6,Chrome v4):caniuse.com/#search=pointer-events

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

Answer 4

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

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

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

Answer 5

$(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>

Answer 6

相反disabled，您可以考虑使用readonly. 使用一些额外的 CSS，您可以设置输入的样式，使其看起来像一个disabled字段。

其实还有一个问题。该事件change仅在元素失去焦点时触发，这不是考虑disabled字段的逻辑。可能您正在将数据从另一个调用推送到该字段。要完成这项工作，您可以使用事件“绑定”。

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