Howto trigger input event programmatically on input text field?
Try this to manually dispatch the event, see EventTarget.dispatchEvent():
inputField.dispatchEvent(new Event("input"))
How do I programmatically trigger an “input” event without jQuery?
The proper way to trigger an event with plain JavaScript, would be to create an Event object, and dispatch it
var event = new Event('input', {
bubbles: true,
cancelable: true,
});
element.dispatchEvent(event);
Or, as a simple one-liner:
element.dispatchEvent(new Event('input', {bubbles:true}));
FIDDLE
This is not supported in IE, for that the old-fashioned way still has to be used
var event = document.createEvent('Event');
event.initEvent('input', true, true);
elem.dispatchEvent(event);
Trigger action on programmatic change to an input value
if the only problem with your solution is breaking of change event on value set. thn you can fire that event manually on set. (But this wont monitor set in case a user makes a change to the input via browser -- see edit bellow)
<html>
<body>
<input type='hidden' id='myInput' />
<input type='text' id='myInputVisible' />
<input type='button' value='Test' onclick='return testSet();'/>
<script>
//hidden input which your API will be changing
var myInput=document.getElementById("myInput");
//visible input for the users
var myInputVisible=document.getElementById("myInputVisible");
//property mutation for hidden input
Object.defineProperty(myInput,"value",{
get:function(){
return this.getAttribute("value");
},
set:function(val){
console.log("set");
//update value of myInputVisible on myInput set
myInputVisible.value = val;
// handle value change here
this.setAttribute("value",val);
//fire the event
if ("createEvent" in document) { // Modern browsers
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", true, false);
myInput.dispatchEvent(evt);
}
else { // IE 8 and below
var evt = document.createEventObject();
myInput.fireEvent("onchange", evt);
}
}
});
//listen for visible input changes and update hidden
myInputVisible.onchange = function(e){
myInput.value = myInputVisible.value;
};
//this is whatever custom event handler you wish to use
//it will catch both the programmatic changes (done on myInput directly)
//and user's changes (done on myInputVisible)
myInput.onchange = function(e){
console.log(myInput.value);
};
//test method to demonstrate programmatic changes
function testSet(){
myInput.value=Math.floor((Math.random()*100000)+1);
}
</script>
</body>
</html>
more on firing events manually
EDIT:
The problem with manual event firing and the mutator approach is that the value property won't change when user changes the field value from browser. the work around is to use two fields. one hidden with which we can have programmatic interaction. Another is visible with which user can interact. After this consideration approach is simple enough.
- mutate value property on hidden input-field to observe the changes and fire manual onchange event. on set value change the value of visible field to give user feedback.
- on visible field value change update the value of hidden for observer.
How to programmatically click on a text input using JQuery?
Thank you all for your help, but I somehow found the solution by randomly checking everything I saw:
$("#m").trigger("focus");
Use focus
instead of click
Related Topics
How to Get Parent Width/Height in React Using Hooks
How to Refresh the Data in a Jqgrid
Javascript Form Submit - Confirm or Cancel Submission Dialog Box
Remove Everything After Last Backslash
Want to Show/Hide Div Based on Dropdown Box Selection
How to Remove a Json Inside a Json by a Key Using Jquery
How to Wait for Element to Disappear in Cypress
How to Highlight Parts of an Imagemap on Mouseover
How to Display the Entire Object in Console in React Native
Move an Image With JavaScript Using Mouse Events
Converting User Input String to Regular Expression
Get Part of the Url Pathname Via JavaScript Regex
How to Combine Object Values from Separate Lines into One Line
Laravel - How to Pass a PHP Variable to a JavaScript Function from a Blade File
How to Display an Image in Two Pages in Pdf Using Jspdf
How to Get the Difference Between Two Arrays of Objects in JavaScript
Discord.Js Sending Message to Specific Channel
Get Initials and Full Last Name from a String Containing Names