Virtual keyboard for use with Textareas

(Mark Hunte) #1

I was interested in seeing if I could make a keyboard for forms similar to the one mentioned in the post below.

Here is my first take on it. It based on my Mac keyboard and I must admit I had some moments of pulling my hair out.

I have it here in two forms a exported symbol and an exported template.

The symbol can be imported to any project. ( use a mi of 700px by 700px scene size)
Make sure you import jquery when using the symbol.

Please let me know what you think
My javascript etc. is organic in form, so I will at some point par it down. But I welcome any suggestions to help improve this.

Things to do:

  • Add up down arrows. ( no mater what I tried I could not get anything to work)

  • Add option key character set for All Alpha keys. ( Using the Option key will only affect the numbers and symbol keys at the mo)

  • Document the functions and action - ( there is a bit going on, so I want people to be able to follow it.)


  • Each Textarea has a click action on it. Which sets a global var with the Textareas Class name.
    This is then used by the other functions to determine which Texture to type in. (43.4 KB) (78.3 KB)

note 1:
I feel symbols is still a little buggy, So use the import menu rather than double clicking or drag n drop, which do also work but I have had some odd results when using the latter.
note 2:
I also had odd issues when exporting them. i.e the exported symbol’ s enter hover timeline would not have both animations for background colour. One would be missing and or another key would highlight!!. I had to completely re do it to fix that corruption.

So if you export your own symbols, test them thoroughly before accepting that they have exported correctly

note 3

  • All relevant elements use a class name and not a ID. Until Tumult fix the issue of id’s not exporting with a Symbol this is the only way to to point to an element when exporting a Symbol )

Virtual keyboard capabilities?
Push user to a scene on successful password entry
(Greg) #2

That’s pretty awesome Mark. I noticed that in the Details text area, that I can use my keyboards up/down keys only after I have hit the “Return” key. Maybe that has something to do with your problem in getting the up/down arrow keys working.

(Mark Hunte) #3

Thanks Greg, ( @gasspence )

Not sure. Just before I posted I actually changed the details area to use a rect rather than a html widget. I found that doing this makes it easier to access the children.

I will retest the up down code in a bit with this in mind. But the up down code would have to simulate a real key event. Unlike the left right code which changes the insertion point by calculation.

I could Iguess calculate the width, character length etc. to determine where to drop or raise the insertion point. But I think it would be better if I could use simulation

(Mark Gizewski) #4

Awesome! Thanks so much for the detailed explanation Mark. MUCH APPRECIATED!!!