gpt4 book ai didi

javascript - 当一个元素被启用/禁用时触发一个函数

转载 作者:技术小花猫 更新时间:2023-10-29 12:51:46 26 4
gpt4 key购买 nike

这似乎是一件相对简单的事情,但我在任何地方都找不到有关如何做的任何信息。我有一个模式,在等待异步数据时打开时输入被禁用。我想知道该输入何时启用,以便我可以聚焦输入。这就是我想要完成的。将其视为全局模式打开处理程序:

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

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

最佳答案

不幸的是,没有onenabledondisabled 监听器。输入字段只能在页面加载后由 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>

附加信息

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

关于javascript - 当一个元素被启用/禁用时触发一个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29631251/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com