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

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);
});

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

<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-events CSS. (Должно работать в 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;
}

вместо атрибута disabled.Затем вы можете добавить свои собственные атрибуты 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 Возможно, вы вводите данные в это поле из другого вызова. Для этого вы можете использовать событие «bind».

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

Answer 7

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

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

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

Answer 8

У нас сегодня была такая проблема, но мы не хотели менять 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');

Answer 9

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

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

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

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

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

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

Answer 10

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

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

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