这似乎是一件比较简单的事情,但是我在任何地方找不到任何关于如何做的事情.我有一个模态,打开与禁用的输入,同时等待异步数据.我想知道该输入何时启用,我可以集中输入.这是我正在努力完成的.认为它是一个全球模式的开放处理程序：
$('.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">
解决方法
不幸的是,没有像onenabled或ondisabled监听器这样的东西.输入字段只有在页面加载后才能被JavaScript启用/禁用(或者由某些用户在开发人员工具的检查器中混淆了HTML).因此,如果要检测到这些更改,则必须使用
MutationObserver,并监听所需元素的属性突变,以便在禁用属性添加到输入字段时进行检查.
以下是我正在谈论的例子：
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上的任何浏览器的兼容性.
