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

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

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

ИМХО самый простой и чистый способ "исправить" это (если вам действительно нужно захватывать клики на отключенных элементах, как это делает 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 3

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

$(".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 4

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

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

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

Answer 5

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

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

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

Answer 6

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

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

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

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

Answer 8

Нет причин, по которым вы не можете смоделировать атрибут, используя комбинацию CSS и readonly:

Примечание: это не будет иметь обычного поведения disabled в <form>, что мешает серверу видеть поле. Это на всякий случай, если вы хотите отключить поле, которое не имеет значения на стороне сервера.

Answer 9

Я сделал что-то очень похожее на Andy E; за исключением того, что я использовал окружающий тег. Однако мне нужно было «имя», поэтому я заменил его на тег без «href».

Answer 10

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

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

<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 12

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

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

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