当元素获得 enabled/disabled 时触发函数

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

当输入变为 enabled/disabled 时没有触发事件吗？

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

如果有用户在异步请求中返回，则启用。

Answer 1

我曾经有过一个项目，但我失去了做它的动力。我搜索了一种方法来做那种事情，我发现 MutationObserver 应该是一个很好的方法。

看看：MutationObserver

也许还有：Mutation Events

希望我正确理解了你的问题。

Answer 2

不幸的是，没有 onenabled 或 ondisabled 听众。页面加载后，输入字段只能由 JavaScript enabled/disabled（或者某些用户在他的开发者工具检查器中弄乱了你的 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>

附加信息

MutationObserver 对象是新引入的功能，某些浏览器的旧版本不支持它：您可以在 this page.[=19= 上检查与任何浏览器的兼容性]

Answer 3

我知道这不是最好的方法，但是 here I go:

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

当元素获得 enabled/disabled 时触发函数

Trigger a function when an element gets enabled/disabled

html

javascript

jquery

twitter-bootstrap

knockout.js

附加信息