当元素被启用/禁用时触发功能

Question

这似乎是一个相对简单的事情,但我找不到任何关于如何做的事情.我有一个模态,在等待异步数据时打开一个禁用的输入.我想知道什么时候输入启用,我可以集中输入.这就是我想要完成的.将其视为全局模态打开处理程序:

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

如果在异步请求中返回了用户,则会启用该功能.

Answer 1

不幸的是,没有这样的东西onenabled或ondisabled听众.输入字段只能在页面加载后由JavaScript启用/禁用(或者某些用户在开发人员工具的检查器中弄乱了HTML).因此,如果要检测这些更改,则必须使用aMutationObserver,并侦听所需元素的属性突变,以便在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>

附加信息

该MutationObserver对象是新引入的功能,某些浏览器的旧版本不支持该功能:您可以检查此页面上任何浏览器的兼容性.