How to programmatically click on a text input using JQuery?

Question

I'm trying to implement a messaging application in my game, so instead of clicking on the input text field manually, I want users to only press "enter", write something, then press "enter" again to submit.

For some reason, when I do this (press "enter"), the onclick alert fires from the input, but the input stays the same, I am still not able to type into the input form. If I manually click it, it works fine.

Am I missing something?

HTML

<form id="messageInput" action="">
    <input id="m" autocomplete="off" maxlength="100" onclick="alert('clicked')"/>
</form>

JAVASCRIPT

if(keyOn["enter"]){
    keyOn["enter"] = false;

    $('#m').click();

    console.log("clicked");
}

i am removing jquery tag in here as you wanted pure js on this — guradio, Jan 21 '17 at 03:13

score 2 · Answer 1 · answered Jan 21 '17 at 03:17

2

$('#m').click(function() {

  alert("click")
}).click();//click here to click automatically on load

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="messageInput" action="">
  <input id="m" autocomplete="off" maxlength="100" />
</form>

Using jquery you can call .click()

answered Jan 21 '17 at 03:17

guradio

15,524
4
36
57

Same thing, alert opens up, but the input text field is not clicked – tery.blargh Jan 21 '17 at 03:20

score 2 · Accepted Answer · answered Jan 21 '17 at 03:42

2

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

answered Jan 21 '17 at 03:42

tery.blargh

405
1
6
23

score 1 · Answer 3 · answered Jan 21 '17 at 03:20

1

The code you've written is for capturing the click event ($("#m").click()).

Try:

$("#m").trigger("click");

answered Jan 21 '17 at 03:20

Meet K.

459
3
15

Alert pops up, but still not clicked, feels like same thing – tery.blargh Jan 21 '17 at 03:22

Hikmat Sijapati · Answer 4 · 2017-01-21T03:42:58.320

1

Try like this..press enter.Event will trigger.

if(confirm('Are you want submit message?')){
$("#m").keyup(function(event){
    if(event.keyCode == 13){
       alert('clicked');
       $("#m").val('');
    }
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="messageInput" action="">
  <input id="m" autocomplete="off" maxlength="100" />
</form>

edited Jan 21 '17 at 03:42

answered Jan 21 '17 at 03:31

Hikmat Sijapati

6,869
1
9
19

This didn't work at all, alert didn't fire either, even including `$("#m").val('');` – tery.blargh Jan 21 '17 at 03:37
Thank you for the help but, I found working solution – tery.blargh Jan 21 '17 at 03:44
@tery.blargh best of luck ahead.if answer is good one feel free to tick mark.thanks – Hikmat Sijapati Jan 21 '17 at 03:58

score 0 · Answer 5 · answered Aug 28 '17 at 00:43

I was having the same issue in an Angular app where the "click" would fire and open something from the element but it wouldn't do any of the angular method calls I had defined in (click)="...", I also found it wouldn't fire off anything defined in onclick()

The solution for me was to add .get(0)

$(el).get(0).click();

How to programmatically click on a text input using JQuery?

5 Answers5