Подія на вимкненому вході

Мабуть, інвалідом <input>не займається жодна подія

Чи є спосіб вирішити цю проблему?

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

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

Тут мені потрібно натиснути на вхід, щоб увімкнути його. Але якщо я не активую, вхід не повинен розміщуватися.

Інвалідні елементи не запускають події миші. Більшість браузерів поширюватимуть подію, що походить від вимкненого елемента до дерева 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).

Можливо, ви зможете зробити поле читати лише зараз, а після подачі відключити всі поля, які читаються лише зараз

$(".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');
})

Елементи з обмеженими можливостями "їдять" кліки в деяких браузерах - вони ні на них не реагують, ні дозволяють захоплювати обробниками подій будь-де на елементі чи будь-яких контейнерах.

IMHO, найпростіший і найпростіший спосіб "виправити" це (якщо вам справді потрібно зафіксувати кліки на відключених елементах, як це робить ОП) - це просто додати наступну CSS на свою сторінку:

input[disabled] {pointer-events:none}

Це призведе до потрапляння будь-яких клацань на відключений вхід до батьківського елемента, де ви можете їх нормально фіксувати. (Якщо у вас є кілька вимкнених входів, можливо, ви хочете помістити кожного в окремий власний контейнер, якщо вони вже не викладені таким чином - додатковий <span>або <div>, скажімо, - просто для того, щоб легко розрізнити, який введений інвалід відключений було натиснуто).

Мінус полягає в тому, що цей трюк, на жаль, не працює для старих браузерів, які не підтримують pointer-eventsвластивість CSS. (Це має працювати з IE 11, FF v3.6, Chrome v4): caniuse.com/#search=pointer-events

Якщо вам потрібна підтримка старих браузерів, вам потрібно буде скористатися однією з інших відповідей!

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

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

замість атрибута вимкнено. Потім ви можете додати свої власні атрибути CSS, щоб імітувати відключений вхід, але з більшим контролем.

Замість цього disabledможна подумати про використання readonly. За допомогою додаткових CSS ви можете стилізувати вхід, щоб він виглядав як disabledполе.

Насправді є ще одна проблема. Подія changeзапускається лише тоді, коли елемент втрачає фокус, що не є логікою щодо disabledполя. Можливо, ви натискаєте дані в це поле з іншого дзвінка. Щоб зробити цю роботу, ви можете використовувати подію «прив’язати».

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

АБО зробіть це за допомогою jQuery та CSS!

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

Таким чином ви робите елемент вимкненим, і жодні події вказівника не запускатимуться, але він дозволяє розповсюдження, і якщо він наданий, ви можете використовувати атрибут 'ignore', щоб ігнорувати його.

Сьогодні у нас була така проблема, але ми не хотіли змінювати HTML. Тож ми використовували події миші, щоб досягти цього

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

Я знаходжу інше рішення:

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

пропозиція і тут виглядає як хороший кандидат у цьому питанні

Виконання події клацання на відключеному елементі? Javascript jQuery

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