当元素被启用/禁用时触发功能 [英] Trigger a function when an element gets enabled/disabled

问题描述

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

This seems like a relatively simple thing but I can't find anything anywhere on how to do it. I have a modal that opens with a disabled input while waiting for async data. I want to know when that input becomes enabled to I can focus the input. This is what I'm trying to accomplish. Think of it as a global modal open handler:

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

输入启用/禁用时是否没有触发事件？

Is there not an event that gets triggered when an input becomes enabled/disabled?

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

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

Which becomes enabled if there are users returned in an async request.

推荐答案

不幸的是，没有 onenabled 或 ondisabled 听众。输入字段只能在页面加载后由JavaScript启用/禁用（或者某些用户在开发人员工具的检查器中弄乱了HTML）。出于这个原因，如果要检测这些更改，则必须使用 MutationObserver ，并侦听所需元素的属性突变，以便在禁用时检查属性被添加到您的输入字段。

Unfortunately, there's no such thing as onenabled or ondisabled listeners. Input fields can only be enabled/disabled by JavaScript once the page has loaded (or by some user which is messing up with your HTML in his developer tools' inspector). For this reason, if you want to detect those changes you'll have to use a MutationObserver, and listen for attribute mutations of the element you want, to check whenever the disabled property gets added to your input field.

这是我正在谈论的一个例子：

Here's an example of what I'm talking about:

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 对象是新推出的功能，某些浏览器的旧版本不支持它：您可以在此页<上查看与任何浏览器的兼容性/ a>。

The MutationObserver object is a newly introduced feature, and it isn't supported by old versions of some browsers: you can check the compatibility with any browser on this page.

这篇关于当元素被启用/禁用时触发功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！