Unable to generate a mouse click event inside a input box using javascript/jquery

Question

I am unable to generate a mouse click event inside an input box. I am trying to simulate a user doing a mouse click.

I am trying to use the Chrome console to run these and none is working.

I have tried using the below code.

HTML Input Box:

<input type="email" name="email" class="auth0-lock-input" placeholder="yours@example.com"
       autocomplete="off" autocapitalize="off" aria-label="Email" aria-invalid="false"
       value="">

Javascript:

document.getElementsByClassName('auth0-lock-input')[0].click();

Or

document.getElementsByClassName('auth0-lock-input')[0].mouseenter();

Or

let element= document.getElementsByName('email');
for (elt of element) {
   elt.mouseenter();
}

`````````````````React Listener`````````````````````````

trapBubbledEvent: function (topLevelType, handlerBaseName, element) {
    if (!element) {
      return null;
    }
    return EventListener.listen(element, handlerBaseName, ReactEventListener.dispatchEvent.bind(null, topLevelType));
  trapCapturedEvent: function (topLevelType, handlerBaseName, element) {
    if (!element) {
      return null;
    }
    return EventListener.capture(element, handlerBaseName, ReactEventListener.dispatchEvent.bind(null, topLevelType));
  },
  monitorScrollValue: function (refresh) {
    var callback = scrollValueMonitor.bind(null, refresh);
    EventListener.listen(window, 'scroll', callback);
  },
  dispatchEvent: function (topLevelType, nativeEvent) {
    if (!ReactEventListener._enabled) {
      return;
    }
    var bookKeeping = TopLevelCallbackBookKeeping.getPooled(topLevelType, nativeEvent);
    try {
      ReactUpdates.batchedUpdates(handleTopLevelImpl, bookKeeping);
    } finally {
      TopLevelCallbackBookKeeping.release(bookKeeping);
}
};
module.exports = ReactEventListener;
`````````````````````````````````

What do you expect should be happening when clicking into the input field? — empiric, Jul 23 '19 at 14:12
https://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript — epascarello, Jul 23 '19 at 14:12
@empiric. There is a listener which records the click inside the input box. Hence I am trying to simulate the click. — Stacking, Jul 23 '19 at 14:16
Do you mix up jquery and plain js here? Did you try `$('.auth0-lock-input').click()` already? — empiric, Jul 23 '19 at 14:17
Since you did tag with jQuery I'd say use `$('.auth0-lock-input').trigger('click')` — Taplar, Jul 23 '19 at 14:17
@Taplar: I am getting the below error: Uncaught TypeError: $(...).trigger is not a function at :1:24 — Stacking, Jul 23 '19 at 14:23
Can you paste the listener as well? Actually, we would be able to help you much more quickly if you paste a Sandbox or a working example in your question with the problem. — M0nst3R, Jul 23 '19 at 14:27
@Taplar Thank you. Your suggestions helped me find the issue. — Stacking, Jul 23 '19 at 14:51

score 0 · Answer 1 · answered Jul 23 '19 at 14:21

0

Actually I think that your code is working, but the click() on a input doesnt do any visual effect.

To test it, run:

let input = document.getElementsByClassName('auth0-lock-input')[0]
input.addEventListener('click', () => alert('Clicked') )

answered Jul 23 '19 at 14:21

Rudson Mendes

1
2

The OP says in the comments they already have a click listener from other code – Taplar Jul 23 '19 at 14:25
Yeah, thank you. You are right. I have combined the code given by @Taplar and yours. I could see an alert generated – Stacking Jul 23 '19 at 14:49
Can you please help in making the visual effect visible? – Stacking Jul 23 '19 at 14:50
That sounds like a new question @Stacking – Taplar Jul 23 '19 at 14:52
Yeah, I will wait for next 90 minutes and post a other question – Stacking Jul 23 '19 at 15:13

Unable to generate a mouse click event inside a input box using javascript/jquery

1 Answers1