There is a website which create elements like below and attach onChange function to it:

o.createElement(k.InputField, {
                label: "Enter mobile number",
                variant: "secondary",
                value: i.trim(),
                disabled: v,
                InputProps: {
                  onChange: ({ target: { value: e } }) => {
alert("testing");
                  },
                  maxLength: 10,
                  autoFocus: !0,
                  id: "mobileNum",
                },
                error: Ve.mobileNumberValidationMessage(f, String(i)),
                before: o.createElement(k.Text, { variant: "body", color: "text.2" }, "+", 91),
                css: Ct,
              })

I tried everything to trigger it, only when I type in keyboard it's triggering the alert. I even looped all events like below, but nothing is triggering it:

 const inputElement = document.getElementById("mobileNum");

                  // Step 2: Set its value programmatically
                  const newValue = "9"; // Example new value
                  inputElement.value = newValue;
const eventTypes = [
    "input",        // Input event when the value of an input element changes
    "change",       // Change event when the value of an input element changes and loses focus
    "keydown",      // Keydown event when a key is pressed down
    "keyup",        // Keyup event when a key is released
    "keypress",     // Keypress event when a key is pressed
    "click",        // Click event when a mouse click occurs
    "dblclick",     // Double click event when a mouse double click occurs
    "mousedown",    // Mousedown event when a mouse button is pressed down
    "mouseup",      // Mouseup event when a mouse button is released
    "mousemove",    // Mousemove event when the mouse pointer is moved
    "mouseover",    // Mouseover event when the mouse pointer enters an element
    "mouseout",     // Mouseout event when the mouse pointer leaves an element
    "wheel",        // Wheel event when the mouse wheel is scrolled
    "contextmenu",  // Contextmenu event when the right mouse button is clicked
    "touchstart",   // Touchstart event when a finger touches the screen
    "touchend",     // Touchend event when a finger is removed from the screen
    "touchmove",    // Touchmove event when a finger is dragged across the screen
    "touchcancel",  // Touchcancel event when a touch event is interrupted
    "focus",        // Focus event when an element gains focus
    "blur",         // Blur event when an element loses focus
    "submit",       // Submit event when a form is submitted
    "reset",        // Reset event when a form is reset
    "resize",       // Resize event when the window or element is resized
    "scroll"        // Scroll event when the window or element is scrolled
];

eventTypes.forEach(eventType => {
    const event = new InputEvent(eventType, {
        inputType: "insertText",
        data: newValue,
        bubbles: true,
        posed: true
    });
    inputElement.dispatchEvent(event);
});

All it does is typing in the input, but it's not alerting in the onChange, but if I press backspace or type something manually it's alerting.

How do I exhibit the real typing behaviour on this input?

There is a website which create elements like below and attach onChange function to it:

o.createElement(k.InputField, {
                label: "Enter mobile number",
                variant: "secondary",
                value: i.trim(),
                disabled: v,
                InputProps: {
                  onChange: ({ target: { value: e } }) => {
alert("testing");
                  },
                  maxLength: 10,
                  autoFocus: !0,
                  id: "mobileNum",
                },
                error: Ve.mobileNumberValidationMessage(f, String(i)),
                before: o.createElement(k.Text, { variant: "body", color: "text.2" }, "+", 91),
                css: Ct,
              })

I tried everything to trigger it, only when I type in keyboard it's triggering the alert. I even looped all events like below, but nothing is triggering it:

 const inputElement = document.getElementById("mobileNum");

                  // Step 2: Set its value programmatically
                  const newValue = "9"; // Example new value
                  inputElement.value = newValue;
const eventTypes = [
    "input",        // Input event when the value of an input element changes
    "change",       // Change event when the value of an input element changes and loses focus
    "keydown",      // Keydown event when a key is pressed down
    "keyup",        // Keyup event when a key is released
    "keypress",     // Keypress event when a key is pressed
    "click",        // Click event when a mouse click occurs
    "dblclick",     // Double click event when a mouse double click occurs
    "mousedown",    // Mousedown event when a mouse button is pressed down
    "mouseup",      // Mouseup event when a mouse button is released
    "mousemove",    // Mousemove event when the mouse pointer is moved
    "mouseover",    // Mouseover event when the mouse pointer enters an element
    "mouseout",     // Mouseout event when the mouse pointer leaves an element
    "wheel",        // Wheel event when the mouse wheel is scrolled
    "contextmenu",  // Contextmenu event when the right mouse button is clicked
    "touchstart",   // Touchstart event when a finger touches the screen
    "touchend",     // Touchend event when a finger is removed from the screen
    "touchmove",    // Touchmove event when a finger is dragged across the screen
    "touchcancel",  // Touchcancel event when a touch event is interrupted
    "focus",        // Focus event when an element gains focus
    "blur",         // Blur event when an element loses focus
    "submit",       // Submit event when a form is submitted
    "reset",        // Reset event when a form is reset
    "resize",       // Resize event when the window or element is resized
    "scroll"        // Scroll event when the window or element is scrolled
];

eventTypes.forEach(eventType => {
    const event = new InputEvent(eventType, {
        inputType: "insertText",
        data: newValue,
        bubbles: true,
        posed: true
    });
    inputElement.dispatchEvent(event);
});

All it does is typing in the input, but it's not alerting in the onChange, but if I press backspace or type something manually it's alerting.

How do I exhibit the real typing behaviour on this input?

• javascript

• "There is a website"? Is it your website? Can you modify it? Also, it sounds like you want to trigger programatically, not manually. Backspacing is manually. – isherwood Commented Apr 19, 2024 at 20:56
• Not my website , I am trying to do testing on external website , i am trying to do this programatically via developer console. – Gracie williams Commented Apr 20, 2024 at 4:59

5 Answers 5

What you want is probably "how to trigger trusted input" and this one is simple, you can use document.execCommand() for this. E.g.

document.getElementById('mobileNum').focus();
document.execCommand('insertText', false, "9837585855");
document.getElementById('getOtp').click();

EDIT

In my opinion, even though the above method is deprecated, it still works and shouldn't be a problem for the mean time, but i'm not sure what use case you want. So here i'll provide another way:

const input = document.getElementById('mobileNum');
Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set.call(input, "9837585855");
const event = new Event('input', { bubbles: true });
input.dispatchEvent(event);
document.getElementById('getOtp').click();

Very Simple-> No need to use any special function. All you need to do is just set the value of the input to your mobile number by using setAttribute and dispatch the input event. (Remove the last line(.click) if you don't want to auto-click the send OTP button)

const input= document.getElementById("mobileNum");
input.setAttribute("value", '9192939495');
const event = new Event('input', { bubbles: true });
input.dispatchEvent(event);
document.getElementById('getOtp').click();

You can manually call the method:

inputElement.onchange()

if that does not work try .onChange() instead.

Example:

let input = document.getElementById('input')
input.onchange = () => alert('test')
function triggerChange(){
    input.onchange()
}

<p>Type or click the button to trigger change: </p>
<input id="input">
<button onclick="triggerChange()">Trigger change</button>

This may be a case where the DOM is not fully loaded yet at the time you try to trigger the event. It works when you manually change the field because the DOM is surely loaded at that time. But otherwise, you may be programmatically trying to trigger the event before it is actually binded.

In jQuery for example, there is a $(document).ready() function which executes once the DOM is loaded. If you're not using jQuery, then one option would be to use the body tag to reference an onload function:

<body onload="javascript:triggerChange()">

The triggerChange function will contain your code to trigger the event.

You have a very specific goal, thus the answer can be very direct

This site uses ReactJS, which may look like one thing on the backend but is always interpreted to normal javascript on the browser's side. I inspected the input element, referenced it in the console, it contains a __reactEventHandlers$probablyrandomtext attribute, which itself is an object that includes an onChange function which is the function responsible for controlling the alerts you only see when you type

const mobileNum=document.getElementById('mobileNum')

const reactEventHandler=Object.keys(mobileNum)
  .filter(u=>u.includes('reactEventHandler'))[0]

const orig=mobileNum[reactEventHandler].onChange


//USAGE
orig({target:{value:""}}) //blank example
orig({target:{value:"1234"}}) //not enough digits example
orig({target:{value:"1231231234"}}) //incorrect number example

Have a good day :D