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

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.

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,980
19
29

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...

Javascript enter key pressed event alternative for mobile site

4 Answers4

Linked