Запускать функцию, когда элемент активируется/отключается

Это похоже на относительно простую вещь, но я ничего не могу найти о том, как это сделать. У меня есть модальный, который открывается с отключенным входом, ожидая асинхронных данных. Я хочу знать, когда этот вход становится включенным, я могу сфокусировать вход. Это то, что я пытаюсь выполнить. Подумайте об этом как о глобальном модальном открытом обработчике:

$('.modal').on('shown.bs.modal', function (event) {
    var textInput = $(event.target).find('input[type=text]:visible').first();
    if (textInput.is(':disabled'))
    {
        textInput.on('<<<<<enabled>>>>>', function(){
            textInput.off('<<<<<enabled>>>>>');
            textInput.focus();
        });
    }
    else
    {
        textInput.focus();
    }
});

Нет ли события, которое запускается при включении/отключении входа?

<input type="text" class="form-control txtUserSearch" data-bind="value: userFilter, event: { keyup: FilterUsers }, enable: AvailableUsers().length > 0">

Что становится доступным, если есть пользователи, возвращаемые в async-запросе.

Ответ 1

К сожалению, нет таких вещей, как прослушиватели onenabled или ondisabled. Поля ввода могут быть включены/отключены JavaScript только после загрузки страницы (или каким-либо пользователем, который испортил ваш HTML в инспекторе своих инструментов разработчика). По этой причине , если вы хотите обнаружить эти изменения, вам придется использовать MutationObserver и прослушивать мутации атрибута нужного элемента, проверять, когда свойство disabled добавляется в ваше поле ввода.

Вот пример того, что я говорю:

var btn = document.getElementById('toggle'),
    input = document.getElementById('inp');

// This is just to demonstrate the behavior of the MutationObserver
btn.addEventListener('click', function() {
    if (input.disabled) input.disabled = false;
    else input.disabled = true;
});
                     

var observer = new MutationObserver(function(mutations) {
    for (var i=0, mutation; mutation = mutations[i]; i++) {
        if (mutation.attributeName == 'disabled') {
            if (mutation.target.disabled) {
                // The element has been disabled, do something
                alert('You have disabled the input!');
            } else {
                // The element has been enabled, do something else
                alert('You have enabled the input!');
            }
        }
    };
});

// Observe attributes change
observer.observe(input, {attributes: true});

<p>Try clicking the button to disable/enable the input!</p>
<input id="inp" type="text" placeholder="Write something...">
<button id="toggle">Toggle</button>

Ответ 2

У меня когда-то был проект, но я потерял мотивацию сделать это. Я искал способ сделать такие вещи, и я обнаружил, что MutationObserver должен быть хорошим способом сделать это.

Посмотрите: MutationObserver

А может быть и там: Mutation Events

Надеюсь, я правильно понял ваш вопрос.

Ответ 3

Я знаю, что это не лучший способ, но здесь я иду:

var timeToCheck = 1000, past = 0;

function wait_enable (element) {
    var timer = setInterval(function(){
        if(element.is(":enabled")){
            element.focus();
            clearInterval(timer);
        }
        /* //here you can set a limit
        past += timeToCheck;
        if (past > limit) {
            clearInterval(timer);
        }
        */
    }, timeToCheck);
}

var textInput = $("input");
wait_enable(textInput);

$("button").on("click", function(){
    textInput.prop("disabled", false);
});