keypress fail to work on mobile browser

Question

This Meteor client event works fine on desktop browser but fail to do the same on mobile browser "Chrome".

It detects the key entry of "g" after "@" and replace it with "@gmail.com".
Any idea how to get it to work on mobile phone as well? thx

Template.input.events({
  'keypress input': function (evt, template) {
    if (evt.which === 13) {
      //do stuff
    }
    else if (Session.get('taskSelected') === 'walk') {
      if (evt.which == 103) { // "g" has been typed do gmail.com
        utility.inputReplaceWith('gmail.com', evt);
      }
      else if (evt.which === 121) {  // "y" for yahoo.com
        utility.inputReplaceWith('yahoo.com', evt);
      }
      else if (evt.which === 104) {
        utility.inputReplaceWith('hotmail.com', evt);
      }
    }
  }
});

    inputReplaceWith: (text, evt) => {
      let elem = document.getElementsByName('email')[0].value;
      if (elem.slice(-1) == '@') { // last char is "@"
        evt.preventDefault();
        document.getElementsByName('email')[0].value = elem + text;
      }
    },

Possible duplicate of [Capture keys typed on android virtual keyboard using javascript](https://stackoverflow.com/questions/30743490/capture-keys-typed-on-android-virtual-keyboard-using-javascript) — reyiyo, Oct 10 '17 at 19:04

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

Looks like "keypress" event in Chrome for Android is troublesome.

See:

TL;DR: use "keydown" and/or "keyup" event(s) instead, or even "input" event.

edited May 23 '17 at 12:24

Community

1
1

answered Feb 21 '17 at 02:54

ghybs

47,565
6
74
99

score 1 · Answer 2 · answered Oct 10 '17 at 18:45

1

There is a textInput event that gives you the entered character and is also cancellable

const inputField = document.getElementById('wanted-input-field');

inputField.addEventListener('textInput', function(e) {
    // e.data will be the 1:1 input you done
    const char = e.data; // In our example = "a"

    // If you want the keyCode..
    const keyCode = char.charCodeAt(0); // a = 97

    // Stop processing if "a" is pressed
    if (keyCode === 97) {
        e.preventDefault();
        return false;
    }
    return true;
});

answered Oct 10 '17 at 18:45

reyiyo

593
5
7

Please don't add [the same answer](https://stackoverflow.com/a/46673783/5292302) to multiple questions. Answer the best one and flag the rest as duplicates. See [Is it acceptable to add a duplicate answer to several questions?](http://meta.stackexchange.com/q/104227/347985) – Petter Friberg Oct 10 '17 at 18:52

keypress fail to work on mobile browser

2 Answers2