Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Trigger Event Manually

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 its 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,
        composed: true
    });
    inputElement.dispatchEvent(event);
});

all it does is typing in the input , but its not alerting in the onChange , but if i press backspace or type something manually its alerting.

How do i exhibit the real typing behaviour on this input.Thanks.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search