javascript - How do I listen for input events on mobile browsers? - Stack Overflow

admin管理员组

文章数量:1353343

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 patible, 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:

.js

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 patible, 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./martellaj/clap-back-generator/blob/master/js/main.js

• javascript
• html

Share Improve this question Follow edited Dec 20, 2016 at 3:57 Joe Martella asked Dec 20, 2016 at 3:23 Joe MartellaJoe Martella 78222 gold badges88 silver badges2020 bronze badges 4

• What does clapback do? – Phix Commented Dec 20, 2016 at 3:36
• 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 Commented Dec 20, 2016 at 3:38
• This seems to be working as expected for me in a simple fiddle. 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 Commented Dec 20, 2016 at 4: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 Commented Dec 20, 2016 at 4:21

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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

HTML:

<input type="text" id="inpt" autocapitalize="none" autoplete="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
  }
  
}

the input event is not supported in mobile

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

Updating for 2019: input and change is supported by the majority of popular mobile browsers: https://developer.mozilla/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

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

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

本文标签： javascriptHow do I listen for input events on mobile browsersStack Overflow