Javascript enter key pressed event alternative for mobile site

Question

I have a quickfeedback widget in my site which has only one textbox. When user presses enter key, the feedback is automatically sent using ajax. But this doesn't work in mobile devices like android, j2me and so on. Is there any alternative that works in both desktop and mobile? Adding a submit button is not acceptable for me.

I think you should wrap it into a form and catch the onsubmit event. I guess that will be triggered when pressing 'enter' on the mobile device. — Toverbal, May 01 '13 at 11:31
@ExplosionPills I want to keep it simple with just one text box only. — Jasir, Sep 30 '16 at 13:56

Adaz · Accepted Answer · 2013-05-01T11:44:09.797

12

I just checked on android, when you type something and press "Go" (enter alternative?) it will trigger an event and the key code is actually 13 so the same as Enter on desktop keyboards.

Edit:

I'd suggest debugging the code and checking whether the submit is actually triggered but maybe the key code isn't always 13? Just guessing..

Edit2:

Test this code on your mobile. When I press "Go" the input value changes to "sent!" which proves that it works.

edited May 01 '13 at 11:44

answered May 01 '13 at 11:35

Adaz

1,627
12
14

Where's the code for that link?? – 425nesp Jan 17 '23 at 03:21

score 2 · Answer 2 · answered May 01 '13 at 11:50

2

Why not use onblur in combination with enter key? If one can press enter, it'll work as is. If one can't, they'll just leave input and then onblur will do work.

answered May 01 '13 at 11:50

Ale

1,998
19
31

score 0 · Answer 3 · answered Nov 20 '19 at 11:11

I made it with wrapping in a form add onsubmit then preventDefault. (@submit.prevent in Vue, actually.)

There doesn't really need to be an enter button, only just form and input.

    form.field.m-sm.px-md(@submit.prevent="onSearch")
      .control.has-icons-right
        input.input.is-rounded(type="search" placeholder="Search" v-model="q")
        span.icon.is-right
          fa(icon="search")

score 0 · Answer 4 · answered Jan 27 '21 at 16:54

I got a exact answer for this... you need to recognize which is the key code of pressed button. Usually that is 13. And to activate this key in mobile you need to add type="submit" to that button. Code given down below with example...

var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("myBtn").click();
  }
});

<!DOCTYPE html>
<html>
<body>

<h3>Trigger Button Click on Enter</h3>
<p>Press the "Enter" key inside the input field to trigger the button.</p>

<input id="myInput" value="Some text..">
<button id="myBtn" type="submit" onclick="javascript:alert('Hello World!')">Button</button>


</body>
</html>

Example on w3schools
Example on stackoverflow

Remember that you need to add type="submit" to that button...! Otherwise it wouldn't work properly in mobile devices...

The OP clearly said he has NO button. So this answer is useless. `Adding a submit button is not acceptable for me.` Not sure what is not clear about this. — , Feb 19 '23 at 05:06

score 0 · Answer 5 · edited Jun 11 '23 at 23:19

0

Just change the e.code=== "enter" to e.keyCode===13**. It works for both desktop and mobile. The "Go" key on mobile has the same keyCode as "Enter" key. Check your e object in console.log() in responsive mode (mobile), and you will understand the difference.

edited Jun 11 '23 at 23:19

Kevin M. Mansour

2,915
6
18
35

answered Jun 08 '23 at 14:47

Aniket Pandey

464
1
9

You actually didn't add anything new from [this 2013's above answer](https://stackoverflow.com/a/16317389/14945696)? – Kevin M. Mansour Jun 11 '23 at 23:20
I'm new to stack overflow so, missed that one. And I realised later that e.keycode is deprecated and I myself don't use it Hence `e.key === "Enter"` must be used, works perfectly for mobile and desktop. – Aniket Pandey Jun 12 '23 at 08:51

Javascript enter key pressed event alternative for mobile site

5 Answers5

Linked