How to simulate click event on an input box

I am trying to simulate click on an input box. When its clicked manually, a drop down auto suggestion box appears as suggestions about past searches. However, when I try to simulate the click programmatically, I'm getting the error that 'object doesn't support click method'. Is there any other way to do this? All I want is the click event and the auto suggestion box to drop down. Btw, this is Gmail's Search Mail input box on their mailbox that I am trying to play around with through web console.

I have tried to call click function through className, but it gives me the error of either undefined or object doesn't support click. This is the widget that I am talking about:

  <input name="q" class="gb_cf" aria-haspopup="true" aria-owns="gs_sbt50" aria-live="off"  dir="ltr" spellcheck="false" aria-label="Search mail" type="text" placeholder="Search mail" value="" autocomplete="off">

  <input disabled="" class="gb_cf" id="gs_taif50" dir="ltr" autocomplete="off">

Few things that I have tried:

    document.getElementbyClassName("gb_cf")[0].click(); 
    document.getElementbyName("q")[0].click();
    document.getElementbyId("gs_taif50").click();

None of them work. Any ideas?

Answers:

You need to .focus() instead of .click()

document.getElementbyClassName("gb_cf")[0].focus(); //or
document.getElementbyId("gs_taif50").focus();

If you want to use pure/native javascript, you can use the onfocus attribute of the input element to call a Js function.

<script>
    function showButton(){
    document.getElementById('mybutt').style.display = "block";
}
</script>

<body>
    <input id="myinp" type="text" placeholder="place" onfocus="javascript:showButton()"/> 
    <button id="mybutt" style="display:none;">OK</button>
</body>

In the above file, you should see the "OK" button appear when you click on the input field.

How to simulate click event on an input box

Answers:

Tags

Recent Questions

Top Questions