Key events don't work properly on Android Chrome (with default keyboard)

[rquast]

I've been trying substance (latest dev), and noticed that the key events or something aren't properly firing on android chrome, which causes quite a few bugs (like not activating the check/save button, or delete key not working, etc).

Is there anything I could do to help with that?

[rquast]

Chrome returns 229 as the keyup value for everything. Tested on android 5.1.1 phone and android 6 phone, latest chrome browser.

https://jsfiddle.net/milanraval/eu8tw2wk/

Screenshot is mac on left, android 6 phone on right.

[rquast]

A long thread about the issue: https://bugs.chromium.org/p/chromium/issues/detail?id=118639

[rquast]

Does it ignore the key events because of this?

substance/packages/surface/Surface.js

Line 254 in 28a8692

if ( event.which === 229 ) return

[rquast]

I read some of the comments in that long thread.. installing hacker's keyboard will fix the issue (sends correct key codes) with the typing and the save button getting triggered properly.

https://play.google.com/store/apps/details?id=org.pocketworkstation.pckeyboard&hl=en

So it appears to be an issue dealing with the returned key codes.

[rquast]

Actually.. using hackers keyboard makes everything work as well as it does on desktop.

Something like this library may help augment the problem (or some kind of input event abstraction?): https://github.com/liftoff/HumanInput

[obuchtala]

Hey @rquast,

Thanks for collecting this information. The tenor in the thread seems to be either using physical keyboards or not relying on keyboard events at all when it comes to mobile devices.
For the latter, we need to do a dedicated development iteration with those devices, which we haven't done yet. Then we probably will go there:

substance/packages/surface/Surface.js

Lines 104 to 132 in 28a8692

	if (!this.isDisabled()) {
	if (this.isEditable()) {
	// Keyboard Events
	el.on('keydown', this.onKeyDown)
	// OSX specific handling of dead-keys
	if (!platform.isIE) {
	el.on('compositionstart', this.onCompositionStart)
	}
	// Note: TextEvent in Chrome/Webkit is the easiest for us
	// as it contains the actual inserted string.
	// Though, it is not available in FF and not working properly in IE
	// where we fall back to a ContentEditable backed implementation.
	if (inBrowser && window.TextEvent && !platform.isIE) {
	el.on('textInput', this.onTextInput)
	} else {
	el.on('keypress', this.onTextInputShim)
	}
	}
	if (!this.isReadonly()) {
	// Mouse Events
	el.on('mousedown', this.onMouseDown)
	el.on('contextmenu', this.onContextMenu)
	// disable drag'n'drop
	// we will react on this to render a custom selection
	el.on('focus', this.onNativeFocus)
	el.on('blur', this.onNativeBlur)
	// activate the clipboard
	this.clipboard.attach(el)
	}

, add some platform detection and register adequate handlers.

Mobile devices is on our agenda, but we won't be able to address the next 3 months.

[rquast]

@oliver---- yes, good idea. Someone else may do some more work on this or come up with a good solution. The thread didn't seem to have any great solutions from what I could read.

[rquast]

I am pretty sure things are good here now. You may want to test it out.

[Praneshjs]

I faced the same issue, my solution is
$('.NumOnly').on('input', function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
});

$('.NumDotOnly').on('input', function (event) {
this.value = this.value.replace(/[^0-9.]/g, '');
});

$(".AlphaDotOnly").on("input", function (event) {
this.value = this.value.replace(/[^a-zA-Z .]/g, '');
});

$(".AlphaOnly").on("input", function (event) {
this.value = this.value.replace(/[^a-zA-Z]/g, '');
});

Reference: https://stackoverflow.com/a/19111723/4425004

[shilpapatel-bcs]

I faced the same issue, my solution is
$('.NumOnly').on('input', function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
});

$('.NumDotOnly').on('input', function (event) {
this.value = this.value.replace(/[^0-9.]/g, '');
});

$(".AlphaDotOnly").on("input", function (event) {
this.value = this.value.replace(/[^a-zA-Z .]/g, '');
});

$(".AlphaOnly").on("input", function (event) {
this.value = this.value.replace(/[^a-zA-Z]/g, '');
});

Reference: https://stackoverflow.com/a/19111723/4425004

working, thanks

[sevillaarvin]

I faced the same issue, my solution is
$('.NumOnly').on('input', function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
});

$('.NumDotOnly').on('input', function (event) {
this.value = this.value.replace(/[^0-9.]/g, '');
});

$(".AlphaDotOnly").on("input", function (event) {
this.value = this.value.replace(/[^a-zA-Z .]/g, '');
});

$(".AlphaOnly").on("input", function (event) {
this.value = this.value.replace(/[^a-zA-Z]/g, '');
});

Reference: https://stackoverflow.com/a/19111723/4425004

Url for the stackoverflow link is missing btw, it's just (url) in markdown.

[cbdeveloper]

There are heated discussions in Chromium about this issue since 2012. So far, no solution.

https://bugs.chromium.org/p/chromium/issues/detail?id=118639

[Praneshjs]

URL for stackoverflow could be
Source Ans: https://stackoverflow.com/a/19111723/4425004
in previous post reference link is pointing to https://github.com/substance/substance/issues/url which caused the issue in loading.

My QA for the Issue
https://stackoverflow.com/q/54866373/4425004

[saikumar-carbanio]

I faced the same issue, my solution is
$('.NumOnly').on('input', function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
});

$('.NumDotOnly').on('input', function (event) {
this.value = this.value.replace(/[^0-9.]/g, '');
});

$(".AlphaDotOnly").on("input", function (event) {
this.value = this.value.replace(/[^a-zA-Z .]/g, '');
});

$(".AlphaOnly").on("input", function (event) {
this.value = this.value.replace(/[^a-zA-Z]/g, '');
});

Reference: https://stackoverflow.com/a/19111723/4425004

@Praneshjs It's working. Thank you so much

[vaasav-kumar]

With my experience i would like to share my knowledge,

Desktop Browsers

<input type="number">

1. Safari - allows Chars too (may be depends on version)
2. maxlength not supported.
3. Cursor position is unable to detect.
4. @keypress event detected.

---

<input type="text">

1. works as expected.

---

<input type="tel">

1. works as expected.

---

Android Mobile Browser (Chrome)

<input type="number">

1. Opens numeric keypad
2. @keypress event detected.
3. Cursor position is unable to detect.

---

 <input type="text">

1. @keypress event not even detected.
2. maxlength not working properly.

---

 <input type="tel">

1. @keypress event is detected.
2. maxlength supported.
3. Cursor position in input field can be detected.

---

Note:
For detecting cursor position I used,

let caretPos = e.target.selectionStart

Let me know is there are any ways to detect cursor position in input[type="number"].

---

Suggestion

For Desktop browsers, use input[type="text"] to handle cases like keypress event and replace some values using cursor position.

For Android browsers, use input[type="tel"] to handle same cases mentioned above.

[YamidDev]

I faced the same issue, my solution is
$('.NumOnly').on('input', function (event) {
this.value = this.value.replace(/[^0-9]/g, '');
});

$('.NumDotOnly').on('input', function (event) {
this.value = this.value.replace(/[^0-9.]/g, '');
});

$(".AlphaDotOnly").on("input", function (event) {
this.value = this.value.replace(/[^a-zA-Z .]/g, '');
});

$(".AlphaOnly").on("input", function (event) {
this.value = this.value.replace(/[^a-zA-Z]/g, '');
});

Reference: https://stackoverflow.com/a/19111723/4425004

Thank you very much, this has been very helpful