You can't type characters on android

[jcubic]

When you enter a site with fullscreen terminal on android the keyboard is popup but you can't enter characters

Fixing this bug will probably fix issue on iPhone and iPad.

[jcubic]

When you type characters they are append to adress bar, that's why screen keyboard is visible focus is in adress bar.

[jcubic]

You can type characters using hardware keyboard but not virtual one.

[KeithTurkowski]

I believe this is the same issue as the one that was resolved here:
novnc/noVNC#275

I tested this using the Chrome browser on Android and found that numbers 0 to 9 and ENTER worked, but other characters did not.

[jcubic]

I've just read on wikipedia article that WebShell use it's own keyboard for touch devices. I need to look into that. This will also fix #36

[jcubic]

I almost fixed the issue, demo here: http://terminal.jcubic.pl/android.html I map terminal cursor to textarea (reusing clipboard) but on Android it act weird (work fine on desktop).

[jcubic]

I think I've fixed the issue in devel branch.

[mitchellmcmillan]

That demo does not fix it for me. Running latest stable chrome on 4.4.3

[jcubic]

Did you tap on terminal? There is no way to open virtual keyboard onLoad, only native events can trigger keyboard to popup. I can only test on 2.3.3 and you can't isntall google chrome on it (I've tested on builtin webkit browser)

[KeithTurkowski]

Tested this on Android 4.4.2 using the built in browser and Chrome, did not work for either.

• Tapping brings up the keyboard for input
• Pressing the Enter key seems to work correctly, the terminal moves the prompt down normally.
• No other keys / inputs display.
• Typing a string seems to be buffered and used in the autocomplete android feature, and typing the backspace key seems to operate on the autocomplete, but nothing actually appears in the terminal.

[jcubic]

I'm using hacker keyboard, will try with builtin one.

[mitchellmcmillan]

when I press enter I get this error

[jcubic]

@mitchelldmcmillan sorry about that, I've changed the API and old api throw exception. But did you was able to type something?

[mitchellmcmillan]

No, nothing showed up, just an error when I pressed space

[mitchellmcmillan]

A little update, I tried again and there are no more errors, but still nothing shows up. Also tried in Firefox, nothing as well.

[prologic]

+1 Any fix for this issue yet? I use jquery.terminal in quite a few projects and it woud be nice to have it work just as well on mobile devices :)

[twilco]

I'd also like to put in my +1 for this issue. I've tried the terminal on 2 different Android devices and the problem persists for both. It'd be great if this worked :)

[vfioox]

+1 I tried using it on WP8 and no results

[jcubic]

I've updated the demo to lastest css and js. And it work on my phone (Andorid 2.3) but enter don't work on different phone I've tested. I've also tested on browserstack on two phones and it work.

[jcubic]

Fixed enter on that one phone.

[mitchellmcmillan]

Nothing shows up as you type, when you press enter it says "you said: ". I think it must be an issue with autosuggestion, as the words show up in the bar above my keyboard as well as suggestions. Also just a change I am now testing on CyanogenMod nightly, still Android 4.4.4 and latest stable Chrome.

[jcubic]

can you test again and tell me what get echo while you typing?

[KeithTurkowski]

When I press the enter key, I get:

you enter :
keydown return false

All other key presses display:

keydown else

[jcubic]

It look like keypress don't work at all, weird.

[mitchellmcmillan]

All I am getting when I press enter is "you enter:"
Nothing else

[jcubic]

Use android.php file - it use ?<?= time() ?> so it force not to use cache for js and css files.

[mitchellmcmillan]

Now I am getting what Keith described.

[jcubic]

Sorry, I didn't have the time recently to work with the plugin. also it's realy hard to work when my Android (htc desire Z with A 2.3) work fine. Recently I was testing MacOS when I borrow macbook from my friend for a moment but those fixes are not in the repo yet.

[KeithTurkowski]

I did some more testing, in Chrome on Android 4.4.4

The key_down(e) function is triggered when you press a key, e.which and e.keyCode will give the correct value for the key pressed. However, the character is not displayed in the terminal prompt. I will do some more testing, but I believe to fix this, android must be detected and the character injected to the command prompt.

[KeithTurkowski]

Summary: key events across Android browsers are inconsistent, implemented incorrectly, and buggy.

Links related to what is causing this issue:
http://www.w3.org/TR/DOM-Level-3-Events/#events-inputevents
https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart
http://techblog.open-xchange.com/2014/12/02/android-chrome-and-composition-events/
https://code.google.com/p/chromium/issues/detail?id=118639
https://code.google.com/p/chromium/issues/detail?id=422685
RobinHerbots/Inputmask#465

I "fixed" this issue on the latest version of Chrome for Android by caching e.which in the key_down function, and then adding a listener for the compositionupdate event.

(-) $(document.documentElement || window).bind('keypress.cmd', function(e) {
(+) var keystrokes = function(e) {
(-) }).bind('keydown.cmd', keydown_event);
(+) $(document.documentElement || window).bind('keypress.cmd', keystrokes).bind('keydown.cmd', keydown_event);

(+) $(document.documentElement || window).bind('compositionupdate', function(e){if(!lastkey.bad) keystrokes(lastkey);});

(+) lastkey = {which: e.which + (e.shiftKey ? 0 : 32), ctrlKey: e.ctrlKey, bad: e.which == 0};

The 'keypress' event will send the character that is pressed, while the 'keydown' event only sends the key pressed, so you have to check to see if shift is pressed in order to determine upper/lower case, etc.

This is because the keypress event does not trigger on Android Chrome when a composition is being done, although it will trigger on non-compositions, like pressing '1' or 'ENTER'.

Also, there is apparently a bug, in that when a composition completes (by pressing enter for example) when the next composition starts and the next keydown event will send the value of 0 for e.which (but will still trigger all the events).

This is all great, except that this code does not work on the built in "Internet" browser app that comes with Android 4.4.4 or with Firefox on Android.

All 3 browsers seem to handle compositions differently, and send different events in different orders, so here's what happens when the following sequence of keys is pressed.

Sequence: abc(ENTER)abc(ENTER)

(kd) = keydown event
(kp) = keypress event
(ku) = keyup event
(cs) = compositionstart event
(cu) = compositionupdate event
(ce) = compositionend event
(i) = input event
(bi) = beforeinput event

Windows Firefox:

(kd)(kp)a(ku)(kd)(kp)b(ku)(kd)(kp)c(ku)(kd)
(ku)(kd)(kp)a(ku)(kd)(kp)b(ku)(kd)(kp)c(ku)(kd)
(ku)

Android Chrome:

(kd)(cs)(cu)(i)(ku)(kd)(cs)(cu)(i)(ku)(kd)(cs)(cu)(i)(ku)(kd)(ce)(i)(ku)(kd)
(ku)(kd)(cs)(cu)(i)(ku)(kd)(cs)(cu)(i)(ku)(kd)(cs)(cu)(i)(ku)(kd)(ce)(i)(ku)(kd)
(ku)

Android Firefox

(cs)(cu)(i)(cu)(i)(i)(cu)(i)(i)(cu)(i)(i)(ce)(i)(kd)(kp)A(ku)(kd)(kp)b(ku)(kd)(kp)c(ku)(kd)
(ku)(cs)(cu)(i)(cu)(i)(i)(cu)(i)(i)(ce)(i)(kd)(kp)A(ku)(kd)(kp)b(ku)(kd)(kp)c(ku)(kd)(kp)a(ku)(kd)(kp)b(ku)(kd)(kp)c(ku)(kd)
(ku)

Android Internet (default browser)

(kd)(cs)(cu)(i)(ku)(kd)(cs)(cu)(i)(ku)(kd)(cs)(cu)(i)(ku)(ce)(i)(kd)(ku)(i)(kd)
(ku)(kd)(cs)(cu)(i)(ku)(kd)(cs)(cu)(i)(ku)(kd)(cs)(cu)(i)(ku)(ce)(i)(kd)(ku)(i)(kd)
(ku)

Android Internet (default browser) seems to be based on an older version of Chrome, it's very similar except for a minor different in events when a compositionend happens. However, after the first composition it will start sending garbage keys.

Android Firefox seems to do something different (and better) than Chrome, since it actually does a composition and when the compositionend occurs it triggers the (keypress) events from the composition in sequence, this would make Firefox work nicely without any changes necessary, except that it will sometimes store all the keys pressed for the session and injects them into a composition. So you will get every command character you typed flooding into the terminal.

The composition events seem to have no information on the keys being pressed, or inconsistent data between the browsers, so you can only get the key from e.which in keydown events semi-reliably.

Perhaps there is some clever way to do this differently by binding an 'input' event handler, but I don't really see how to make a generic solution that works on all Android browsers due to buggy inconsistent implementation, especially with Chrome.

I gave up on solving the problem in this way, and solved the problem using an field instead, which I will detail a following post.

[KeithTurkowski]

Here's my solution to the problem: KeithTurkowski@2313244#diff-dba734ca44649c50a5de68bf61511841

I use an field to capture the input instead of capturing keypress, it probably isn't fully functional for all the features of jquery.terminal, but it does solve the problem for my purposes.

Unfortunately, the way these events are handled on different browsers on Android is so terrible, I don't think a key event solution is really feasible.

[KeithTurkowski]

Also, if you want to incorporate this code, I think the following line of code is poorly placed:

• self.find('.altinput').focus();

I hacked it in without fully understanding the purpose of the code around it.

[chaos-timothy]

Thanks for this, Keith. I have been experiencing the exact same problem, thanks perhaps to your solution the "Internet" and "Chrome" apps work fine for me on Android. My current issue surrounds the "Google Keyboard" app. The only keystrokes that register are numerals, despite using your updated solution. Any ideas?

[KeithTurkowski]

When you create your terminal, are you using "altinput: true" in the settings? It should work since it's using an <input> element.

[chaos-timothy]

Hi Keith. Good point. I've added that in (not sure if in the right place?). Could you take a look for me here if you have a spare couple minutes ... can anyone see what I've done wrong? Hope it is an obvious fix. http://chaostheorem.com/android

[jcubic]

You need to pass it as an option to second argument.

[chaos-timothy]

Oh my! THANK YOU

[chaos-timothy]

Does anyone else have this same problem? http://chaostheorem.com/android is not compatible with IE11. The enter/return key on the keyboard isn't recognised. Instead, a mouse click event is required? No way to have the script work for both mobiles and desktops?

[KeithTurkowski]

I do something like:

altinput: is_android()

Find a library that detects android / mobile.

[chaos-timothy]

Didn't think of that. Thanks. For anyone else stuck, use this:

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");

altinput: isandroid //second argument

[gpetrov]

Was there a solution to this issue?

I'm using an older embedded chrome browser and cannot type anything in jquery terminal.

when running: http://terminal.jcubic.pl/test.php

i get:

keydown
keyup
no keypress

I see in my user agent string AppleWebKit/533.19.4 = so it is pretty old but unfortunately I'm stuck with it and I really want to use the jQuery Terminal in there as well!

a solution will be greatly appreciated.

[jcubic]

Right now you can try to use KeithTurkowski fork. You will need to use option altinput: true

[gpetrov]

works indeed! thanks!!

Any chance to implement this on the main branch as well?

[jcubic]

Yes I will implement this in main branch, I want it for 0.9.0 version.

[jcubic]

Finally added Keith Turkowski solution with input event to devel branch, I didn't add change event though.

[lshaf]

still not fix on mine.
I'm using android 6.0.1 with chrome v 54.0.2840.68 and with default keyboard.
somehow it's work but my text doesn't appear on terminal screen with fullscreen mode.

you can try it out here https://biol.be/qrpoc

[jcubic]

I can't open that link on my android phone (2.3.3 with default browser), I've got error that the browser can't establish secure connection but it work on my laptop.

[lshaf]

@jcubic waw, you have old phone 😃 .
maybe that's your mobile phone connection problem?
It's just weird, your laptop can access it but android phone can't?

[lshaf]

ohh and I remember 1 more thing.
I've visit your site http://terminal.jcubic.pl/ using my phone and however, when I tap on demo terminal, it throw me to comment terminal. it just keep focused on comment section.

[jcubic]

try to disable terminal on init using option: enabled: false

[jcubic]

I've copied your code to my server and testing, don't know yet why your code is not working it work here: http://terminal.jcubic.pl/android.html

[jcubic]

Fixed in version 0.11.12

[lshaf]

@jcubic big thanks, it works 😸 .

[jcubic]

I think this issue can be closed then.