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.
To disable a button using only JavaScript you need to set its disabled property to false . For example: element. disabled = true . And to enable a button we would do the opposite by setting the disabled JavaScript property to false .
A disabled button is unusable and un-clickable. The disabled attribute can be set to keep a user from clicking on the button until some other condition has been met (like selecting a checkbox, etc.).
The trigger() method triggers the specified event and the default behavior of an event (like form submission) for the selected elements. This method is similar to the triggerHandler() method, except that triggerHandler() does not trigger the default behavior of the event.
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>
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.
I once had a project with it, but I lost the motivation to do it.
I searched for a way to do that kind of stuff, and I found that MutationObserver
should be a good way to do it.
Take a look : MutationObserver
And maybe there too : Mutation Events
I hope I understood your question correctly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With