event.preventDefault() doesn't work with keyCode 229?

Question

I'm trying to make an input field with only integers enabled but in Android Chrome keyboard I'm unable to prevent the user from entering '.' key. The keycode for '.' key is 229 and cancelable is also true which is required for event.preventDefault().

The code comes and calls e.preventDefault() but somehow it doesn't work only for mobile input field in Chrome only. Firefox and iOS Safari works well.

function checkNumeric(e) {
  if ([46, 8, 9, 27, 13, 110].indexOf(e.keyCode) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode === 65 && e.ctrlKey === true) ||
    // Allow: Ctrl+C
    (e.keyCode === 67 && e.ctrlKey === true) ||
    // Allow: Ctrl+X
    (e.keyCode === 88 && e.ctrlKey === true) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39)) {
    // let it happen, don't do anything
    return
  }
  // Ensure that it is a number and stop the keypress
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault()
  }
}

<input type='tel' onkeydown='checkNumeric(event)'>

This answer may be what you're after https://stackoverflow.com/a/42552368/9433780 — slee423, Dec 06 '19 at 11:56
@slee423 No already tried this but this isn't the case for me. In my case the keycodes are different for all the events and are working except for this case where the code is reaching till event.preventDefault() but it doesn't seems to have any effect. — Ritik Patni, Dec 06 '19 at 12:04
Check the following response https://stackoverflow.com/questions/13952686/how-to-make-html-input-tag-only-accept-numerical-values — Fadi.AM, Dec 06 '19 at 12:04
check this it may help you https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229/42552368#42552368 — Lahcen YAMOUN, Dec 06 '19 at 12:05
@Fadi.AM No already tried this but this isn't the case for me. In my case the keycodes are different for all the events and are working except for this case where the code is reaching till event.preventDefault() but it doesn't seems to have any effect. — Ritik Patni, Dec 06 '19 at 12:09
@Saggio Vecchino this is not working you can try the same fiddle if you've an Android device. — Ritik Patni, Dec 06 '19 at 12:10
Check this answer here,hope ir helps https://stackoverflow.com/a/3404022/7184888 — Fadi.AM, Dec 06 '19 at 12:31
After doing some research found this is a known issue with Chrome. Anyone looking for details can find them here https://bugs.chromium.org/p/chromium/issues/detail?id=228440 — Ritik Patni, Dec 12 '19 at 06:26

score 0 · Answer 1 · answered Dec 06 '19 at 12:20

What if you change the conditions placements

function checkNumeric(e) {
     // Ensure that it is a number and stop the keypress
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault()
  }
  if ([46, 8, 9, 27, 13, 110].indexOf(e.keyCode) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode === 65 && e.ctrlKey === true) ||
    // Allow: Ctrl+C
    (e.keyCode === 67 && e.ctrlKey === true) ||
    // Allow: Ctrl+X
    (e.keyCode === 88 && e.ctrlKey === true) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39)) {
    // let it happen, don't do anything
    return
  }
 
}

<input type='tel' onkeydown='checkNumeric(event)'>

Doesn't matter on Android Chrome Keyboard – Ritik Patni Dec 06 '19 at 12:24 — Ritik Patni, Dec 06 '19 at 12:24

score 0 · Answer 2 · answered Dec 06 '19 at 12:45

Try to work around it, by playing with the event triggers. Just add the event oninput which will be triggered when the input change and after that you can just delete the last character if it's the . you're talking about and update the value of your input.

event.preventDefault() doesn't work with keyCode 229?

2 Answers2