iOS HTML5 app uses bluetooth keyboard input. How?

**ratty** · 18th October 2016, 12:15 AM

So after doing some exhaustive searching, I found an online app that relies on the iOS bluetooth keyboard input, without ever showing the keyboard on screen. How is this possible?

This link has info but I don't see how this can be done...

This link seems to discuss catching the keyboard input.

The program in question is some kiddy typing program and the input was just lettering, but even that seems huge. If I could do something similar to that, I could finally start a project I've had in my head for ages. Is there any way we can catch the keyboard input, even if it's just text/letters?

**AyreGuitar** · 18th October 2016, 10:26 AM

ratty - Maybe if you provide a link to the iOS HTML5 app in question you'll get more help?
Are you looking to do this as an iOS app, iOS app with a webpage or as HTML5 app?
Good luck!

**ratty** · 18th October 2016, 11:33 AM

The only issue with sharing is that it's a login-based educational webservice. I'll PM it to you for now.

What I'm after is ANY way of intercepting and interpreting bluetooth keyboard input on iOS without a visible edit box being present. If it's offscreen and out of site but I can use the input characters, that works. If it's an HTML5 app, even better, since they it can also run on Chromebooks or Android tablets. My end goal is to have access to the letters a players types for a text-based game.

**AyreGuitar** · 18th October 2016, 12:41 PM

ratty - I don't have a bluetooth keyboard to check, but I'd suggest trying some javascript routines to intercept the keyboard that can be called from your HTML5 Fusion project.
This might help:
https://www.developphp.com/video/Jav...ML-Application

It should get the keyboard input. Then if you tweak it to store the keys in a string and add another function to pass the string as a return string (and clear the string), you should be able to call it from Fusion and read the string. Just not sure if it will pop up a keyboard on iOS

**ratty** · 18th October 2016, 01:02 PM

Wow, these key events could be just what I needed all along. I'll do some playing with it. I've never implemented java into a fusion app...or even a website. Looks like I've got some learning ahead of me.

Thanks for the continued input, guys.

**ratty** · 18th October 2016, 01:33 PM

Here's an awesome example page:

http://quirksmode.org/dom/events/tests/keys.html#

And documentation:
http://quirksmode.org/dom/events/keys.html#

Using that page with an iPad and a Bluetooth keyboard, I see the key presses are registered without being in an edit field. I don't see, however, where the key code is being intercepted so I know WHICH key is being pressed. If I could get characters and shift, I'd be set!

**AyreGuitar** · 18th October 2016, 02:47 PM

ratty - Glad you're making progress.
Just remember that java and javascript are totally different languages.
Fusion can call javascript functions but not java (AFAIK)

You might find this useful for trying out your javascript: http://htmledit.squarefree.com
eg copy the code I linked to here: https://www.developphp.com/video/Jav...ML-Application
and paste it into the top edit box on this link: http://htmledit.squarefree.com
then click the bottom box and press your keys to see the results.

**AyreGuitar** · 18th October 2016, 03:06 PM

Looking at the documentation link, I think keypress is probably what you want, so you don't have to detect shift, caps lock, etc to change the character to upper/lower case.
Try this out as html (it should show the character pressed as well as keeping a string of characters):

<!DOCTYPE html>
<script>
var mystring; //where to store the text input
document.onkeypress = function(event){
var key_press = String.fromCharCode(event.keyCode);
mystring=mystring+ key_press;

//just for testing so can see key presses and string - not needed in final code
var status = document.getElementById('status');
status.innerHTML = "PRESS Event Fired For : "+key_press;
var input = document.getElementById('input');
input.innerHTML = "Input string "+mystring;
}

</script>
<h2>Javascript Capture Keyboard Input Example</h2>
<h3>onkeypress example</h3>

<p id="status">Keyboard Event Status</p>
<p id="input">Input string</p>

**ratty** · 18th October 2016, 03:31 PM

This is all very helpful and appreciated!

One difference I've noticed between your examples and that test page is that the test page intercepts key presses outside of a text input field. Your examples show the key character, which I certainly need, but only if I'm in the above text field. Outside of the text edit presses aren't registering. I think it's the "on window" event the article mentions?This is on iOS Safari.

Also...I didn't know java and JavaScript were two separate things! I'm a noob.

**ratty** · 18th October 2016, 05:19 PM

More interesting examples. This one seems to work well. The improvement I'd make is having the "click here" area not require the click/tap.

I'm also finding people prefer the which.key event because it's cross browser compatible.

So close to a solution...

http://codepen.io/chriscoyier/pen/mPgoYJ

What happens now? Our existing forums have been reopened!

User Tag List

Thread: iOS HTML5 app uses bluetooth keyboard input. How?

Thread Tools

Search Thread