Large

Virtual Keyboard Interface

By GreyWyvern Last update Nov 8, 2011 — Installed 49,531 times.

Archived Comments (locked)

in
Subscribe to Archived Comments 47 posts, 15 voices



Jesse Andrews Admin

The following is an archive of comments made before threaded discussions was implemented (November 16th, 2008)

 
userpiet User

ThX for the script, altho i can't get it to work yet...

I would like to launch this keyboard trough Greasemonkey in FireFox3, iv'e installed the script but noting shows up (shift or ctrl + doubeclick), ideal i would like to expand it on accessing a text field anywhere in a page.

Another question would be if it can be alterd in a way i can select the the virtualkeys by moving over the "virtualkeyboard" using up/down/left/right arrows and "enter" to select a "virtualkey" (this because i would like to use it in a Mediacenter system controlled by a remote)

Im a total noob when it comes to scripting so might ask imposible thing here ;)

ThX in advance

 
GreyWyvern Script's Author

terzioglu: Yesh, this is a bug in IE6 where it is impossible to cover any select element. There is an iframe hack which can overcome this, but it is probably a little bit too troublesome to implement within the script. I can look into it, but your best bet is to use IE7, or move the select elements above the text field.

Edit: Well it turns out it was not that hard after all :) Updated the script at the homepage. Even though new code was added to the GM and UserJS script, this does not affect their behaviour at all.

 
terzioglu User

Hello GreyWyvern,

thank you for your script. It is very useful for my dictionary pages. I have many of languages on my pages and it is a good solution.

I have a problem with script. Actually i not, the IE6 has a problem with it. I have a search box <input>
the screen of it is here: http://img139.imageshack.us/img139/1706/keyboar...

i moved from script the keyboard 50px bottom, but i wanted to know if there is a solution too?

thank you for your very good script.

 
GreyWyvern Script's Author

@manulite: Hrms, yesh some crazy behaviour there in IE6 when the element has the readonly attribute. I don't know why this is. Well, I do... it's some kind of messed up bug in IE6, but why it happens I don't know. :P

Alternatively, you could return false for the keydown/keypress/keyup events on the form elements, although both this and the virtual keyboard will fail when Javascript is disabled.

 
manulite User

Hi GreyWyvern,

I have been testing your script, excellent work! I would like to use this script to enforce users to enter their passwords using the virtual keyboard only. How do I prevent someone from keying in the password using the actual keyboard? Setting the field to readonly does not seem to work in IE6

 
Hiromacu Scriptwright

Hi GreyWyvern!

I changed the color setting of VKI but some web-sites overwrites it (for example color of characters on the buttons). And some web-site change the padding and the buttons of VKI is slides.
How can I solve this problem?

 
Hiromacu Scriptwright

Thanks again! I did it and works! :D

 
Hiromacu Scriptwright

OK! Thank you for your help! :)

 
GreyWyvern Script's Author

If you examine the non-userjs script here:
http://www.greywyvern.com/code/js/keyboard.js

You should be able to grab the lines related to generating the button and merge them with the userjs script. This code is in the section of code commented by "Find tagged input & textarea elements".

Next you will have to include the keyboard image as a data URI which you can create here:
http://www.greywyvern.com/code/php/binary2base64
Assign the base64 string you get to the "keybut.src" property.

I don't want to add such functionality to the released script because of the high chance inserting an image will break the layout of a form, and make the resulting page look strange.

Good luck!

 
Hiromacu Scriptwright

I mean. I would like to use an icon next to the 'textareas' to activate VKI with a single click, as you did in your site (http://www.greywyvern.com/code/js/keyboard.html).
I talk about this icon: http://img528.imageshack.us/img528/4360/vkigico...

 
GreyWyvern Script's Author

I'm not sure what exactly you mean, Hiromacu. Do you want a different trigger than double-click?

 
Hiromacu Scriptwright

GreyWyvern

How can I put a 'graphical keyboard interface' automatically to any site to activate VKI instead of double-click?

 
Hiromacu Scriptwright

Thank you very much! You are very fast. I tested and works everything well! :-)

 
GreyWyvern Script's Author

Hiromacu: Please email me the keyboard at greywyvern (at) greywyvern.com and I will add it to the released script. Thanks! :)

 
Hiromacu Scriptwright

Hi GreyWyvern!!

Forget my previous comment!
I added Hungarian keyboard layout myself.
I upload this modified script if you want. ;)

Thanks again. Cool stuff... :)

 
Hiromacu Scriptwright

This script is awesome!
Could you add Hungarian keyboard code? I mean special letters (for example á, é, ő, ű etc.). Thanx!

 
jeroen3000 User

@jerone
in holland it is possible, but it seems in belgium there is a difference.

@GreyWyvern
Thanks for adding it ;)

 
aomapes User

Thank you very much both for your help and for the explanation of the bit that has been added.
It works really fine.
That is really sweet !

 
GreyWyvern Script's Author

To change the trigger to Shift or Ctrl + double-click, just add a check in the function (around line 330), like so:

inputElems[y][x].addEventListener('dblclick', (function(a) { return function(e) { if (e.shiftKey) self.VKI_show(a); }; })(keyid), false);

OR

inputElems[y][x].addEventListener('dblclick', (function(a) { return function(e) { if (e.ctrlKey) self.VKI_show(a); }; })(keyid), false);

That should work, although I wish there was comment preview so I could see how it looked before posting :| Note the addition of the e in return function(e)

 
aomapes User

Hi,
Really nice script that is helping me a lot with my penpartner surfing sessions...

But is there a way to change the trigger double click event to something like "shift+double click" or "ctrl + doubleclick" or even "middle click" ? (Since double click pops up the last entries in a textarea)

I am a bit lost and confused in these events syntax and I would really appreciate a hand on that...

By the way I just made a little userstyle to pimp up the keyboard colors:

@namespace url(http://www.w3.org/1999/xhtml);

#keyboardInputMaster{background-color:#FAFAB7 !important;}

#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.hover{background-color:#716BFF !important;}

#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.pressed,#keyboardInputMaster tbody tr td div#keyboardInputLayout table tbody tr td.dead{;background-color:#FFBF57 !important;}

 
bl_nk Scriptwright

There already are the symbols I asked for included in US'intl + ALT layout...

I'd still like to ask for one more option to show the keyboard on say middleclick instead of double click, as doubleclick also seconds as selecting whole words AND bring up the history of text fields, while middleclick has no function on text areas...

 
jerone Scriptwright

@bl_nk
To answer your suggestion. You could make a board with symbols yourself, just read the comments in the script itself. It isn't very hard.

 
bl_nk Scriptwright

Argh no editing comments :/

It would be useful to implement a "special characters" keyboard layout for various symbols that are not accessible on the keyboard, like (r)...

 
bl_nk Scriptwright

Great idea, great implementation, works! Thank you.

Cross
Presentational HTML allowed.
Use <code> for inline code and <pre> for code blocks. Use &lt; and &gt; for literal < and >.
We help break paragraphs and link your links.
or cancel