CODEWITHSUNDEEP
javascriptajaxformseventsmobile
Jasir
Jasir

Reputation: 697

Javascript enter key pressed event alternative for mobile site

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.

Upvotes: 16

Views: 29947

Answers (5)

Adaz
Adaz

Reputation: 1665

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.

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.

Upvotes: 14

Aniket Pandey
Aniket Pandey

Reputation: 632

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.

Upvotes: 1

Muhammed Rahif
Muhammed Rahif

Reputation: 658

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>

  1. Example on w3schools
  2. Example on stackoverflow

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

Upvotes: 0

Polv
Polv

Reputation: 2208

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")

Upvotes: 0

Ale
Ale

Reputation: 2023

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.

Upvotes: 2

Related Questions