How do I listen for input events on mobile browsers?

Question

I wrote a dumb little "web app" that consists of a simple text box that manipulates text and displays the output. Works as I expect on desktop, but not on mobile (Chrome and Safari on iOS). I'm simply adding an event listener to an input, but the handler doesn't seem to be getting fired. I've checked caniuse and it seems compatible, and haven't found any questions asked about this, so I'm hoping it's something I'm just overlooking in my code.

Code snippet:

const input = document.querySelector('#input'); // Yes, that's the input ID.
input.addEventListener('change', clapBack);

Link to full file:

https://github.com/martellaj/clap-back-generator/blob/master/js/main.js

I posted a link to the full file, but it just takes the value of the input, tokenizes it, joins it with an emoji, and then sets that as the value of a paragraph element below the input. Nothing out of the ordinary I think, but I guess a good way to debug would be to create an even simpler function. — Joe Martella, Dec 20 '16 at 03:38
This seems to be working as expected for me in a simple [fiddle](https://jsfiddle.net/Gerrit0/ehrfg1op/). Can you provide a fiddle/page where it is broken? - And the input event IS supported on mobile... at least the basic support you seem to be using. — Gerrit0, Dec 20 '16 at 04:20
Here's the site: martellaj.github.io/clap-back-generator/. Like I said, working for me on desktop, but not on mobile. :/ — Joe Martella, Dec 20 '16 at 04:21

score 1 · Answer 1 · answered Dec 20 '16 at 03:38

1

the input event is not supported in mobile

https://developer.mozilla.org/en-US/docs/Web/Events/input

answered Dec 20 '16 at 03:38

jam mok

19
5

What's the crazy answer? The input event has been supported on mobile devices since 2008-2012. – Mihail H. Feb 09 '23 at 09:10

score 1 · Answer 2 · answered Jul 21 '19 at 20:07

Updating for 2019: input and change is supported by the majority of popular mobile browsers: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event

The following allows you to detect change on mobile browsers:

const input = document.querySelector('#input'); // Yes, that's the input ID.
input.addEventListener('change', clapBack);

Here's an example: https://codepen.io/anon/pen/LwVoWa

score 1 · Answer 3 · answered Jan 08 '23 at 14:44

Instead of using event.key or event.code properties of keypress (keyup, keydown) event, I have used event.inputType, event.data of update event and added few restricting attributes to the input tag to overcome 'smartness' of mobile keyboard app. It is an ugly hack but worked for my purpose.

HTML:

<input type="text" id="inpt" autocapitalize="none" autocomplete="off" autocorrect="off" spellcheck="false" />

JS:

var inpt = document.getElementById('inpt');
inpt.addEventListener('input', do_on_input);

function do_on_input(e) {
  
  if( e.inputType == "insertText"){
    console.log( e.data );
  }
  
  if( e.inputType == "deleteContentBackward"){
    console.log('Backspace');     
  }
  
  if( e.inputType == "insertCompositionText"){
    // without restrictive attribbutes you will need to deal with this type events
  }
  
}

score -1 · Answer 4 · answered Dec 20 '16 at 03:43

-1

As @jam mok said, input isn't supported on mobile. Why not just use a change event?

const input = document.querySelector('#input'); // Yes, that's the input ID.
input.addEventListener('change', clapBack);

answered Dec 20 '16 at 03:43

dave

2,762
1
16
32

This is what I add originally, but it wasn't working for me. I'll try using this in conjunction with a simpler handler function and seeing if it works now. – Joe Martella Dec 20 '16 at 03:46
Well, input and change behave slightly differently. See this answer here http://stackoverflow.com/a/17047607/4992551 – dave Dec 20 '16 at 03:49
I understand how they behave differently, still not seeing any fire on mobile though. :/ – Joe Martella Dec 20 '16 at 03:50

score -1 · Answer 5 · answered Dec 13 '18 at 13:24

For all humans still looking for an answer: onkeyup() does the trick.

So the solution for the mentioned code may look like:

const input = document.querySelector('#input'); // Yes, that's the input ID.
input.addEventListener('keyup', clapBack);

Of course it can also be used inline: <input name="inputText" onkeyup="clapBack()">

How do I listen for input events on mobile browsers?

5 Answers5