Событие с отключенным вводом

Ответ 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).

Ответ 2

Может быть, вы можете сделать поле только для чтения, а на submit отключить все поля только для чтения.

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

а вход (+ script) должен быть

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

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

Ответ 3

Отключенные элементы "едят" клики в некоторых браузерах - они не отвечают на них и не позволяют захватить их обработчиками событий в любом элементе или в любом из его контейнеров.

IMHO самый простой, самый чистый способ "исправить" это (если вам действительно нужно зафиксировать клики на отключенных элементах, таких как OP), просто добавьте следующий CSS на вашу страницу:

input[disabled] {pointer-events:none}

Это приведет к тому, что любые щелчки на отключенном входе попадут в родительский элемент, где вы можете их захватить в обычном режиме. (Если у вас есть несколько отключенных входов, вы можете поместить их в отдельный контейнер самостоятельно, если они еще не были выложены таким образом - добавочный <span> или <div>, скажем - просто сделать это легко отличить, какой отключенный вход был нажат).

Недостатком является то, что этот трюк, к сожалению, не будет работать для старых браузеров, которые не поддерживают свойство CSS pointer-events. Он должен работать от IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

Если вам нужно поддерживать старые браузеры, вам нужно будет использовать один из других ответов!

Ответ 4

Я бы предложил альтернативу - используйте CSS:

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

вместо атрибута disabled. Затем вы можете добавить свои собственные атрибуты CSS для имитации отключенного ввода, но с большим контролем.

Ответ 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>

Ответ 6

ИЛИ сделайте это с помощью jQuery и CSS!

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

Таким образом, вы можете отключить элемент, и никакие события указателя не будут срабатывать, но он позволяет распространять, и если они отправлены, вы можете использовать атрибут "игнорировать", чтобы игнорировать его.

Ответ 7

Вместо disabled вы можете использовать readonly. С помощью некоторого дополнительного CSS вы можете создать стиль, чтобы он выглядел как поле disabled.

Есть и другая проблема. Событие change запускается только тогда, когда элемент теряет фокус, который не является логическим с учетом поля disabled. Возможно, вы вставляете данные в это поле из другого вызова. Для выполнения этой работы вы можете использовать событие "bind".

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

Ответ 8

Я нахожу другое решение:

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

Класс "отключен" исключить отключенный элемент с помощью непрозрачности:

<style type="text/css">
    input.disabled {
        opacity: 0.5;
    }
</style>

И затем отмените событие, если элемент отключен и удалить класс:

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

Ответ 9

выглядит также хорошим кандидатом на этот вопрос.

Выполнение события click на отключенном элементе? Javascript jQuery

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