Solved

Javascript Virtual Keyboard

Posted on 2010-08-24
8
607 Views
Last Modified: 2012-05-10
Greetings Gurus, I have a question regarding a Javascript virtual keyboard.  

Is it possible to write a virtual keyboard in Javascript that will behave like a hardware keyboard.   Let me clarify, I have seen a lot of Javascript examples where the output of the Virtual keyboard was linked to specific text fields or text areas.   However, I would like this Virtual keyboard to be in the web page footer and I would simply like it to fill in whatever text input field has focus, just like a hardware keyboard would behave on any given web page.  

So imagine a web application that has a persistent footer, with this JavaScript keyboard showing, but as you navigate to different pages and the body content changes, the virtual keyboard would be smart enough to fill in whatever input fields are selected as you click on the keyboard buttons.

Thank you in advance for your help.

Regards,

Keith
0
Comment
Question by:kdwood
  • 4
  • 3
8 Comments
 
LVL 2

Expert Comment

by:Orgrim
ID: 33511298
There is a couple of script available. And as you said yourself, plenty of them are showed with an example which bind them within one field input. What you will need to do is to add a little code to bind the keyboard to the last focused field.


Add code to every input fields
<script>
var strFieldNameInput = '';
</script>
<INPUT class=forminput type=password size=25 name=PassWord onfocus="strFieldNameInput = this.name">


Keyboard (from http://www.javascriptbank.com/virtual-keyboard-tool.html/en/)
<IMG height=156 alt=""
            src="keyboard.gif" width=450 useMap=#key>
            <BR><BR><MAP name=key><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + ' '; " 
              shape=RECT coords=119,123,292,146><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '`'; " 
              shape=RECT coords=7,5,32,29><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '1'; " 
              shape=RECT coords=37,4,60,26><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '2'; " 
              shape=RECT coords=65,4,89,28><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '3'; " 
              shape=RECT coords=96,3,117,28><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '4'; " 
              shape=RECT coords=125,5,147,27><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '5'; " 
              shape=RECT coords=155,5,176,28><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '6'; " 
              shape=RECT coords=183,4,205,27><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '7'; " 
              shape=RECT coords=212,5,235,27><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '8'; " 
              shape=RECT coords=241,6,263,28><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '9'; " 
              shape=RECT coords=271,6,292,30><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '0'; " 
              shape=RECT coords=298,4,324,30><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '/'; " 
              shape=RECT coords=334,92,361,118><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '.'; " 
              shape=RECT coords=306,92,331,114><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + ','; " 
              shape=RECT coords=276,93,300,115><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'm'; " 
              shape=RECT coords=246,93,271,115><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'n'; " 
              shape=RECT coords=219,91,245,115><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'b'; " 
              shape=RECT coords=190,91,214,115><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'v'; " 
              shape=RECT coords=159,93,186,115><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'c'; " 
              shape=RECT coords=130,95,153,118><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'x'; " 
              shape=RECT coords=101,90,127,117><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'z'; " 
              shape=RECT coords=74,92,96,115><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '`'; " 
              shape=RECT coords=351,61,376,88><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + ';'; " 
              shape=RECT coords=321,63,348,86><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'l'; " 
              shape=RECT coords=293,64,315,87><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'k'; " 
              shape=RECT coords=263,63,286,87><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'j'; " 
              shape=RECT coords=234,62,258,85><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'h'; " 
              shape=RECT coords=206,64,229,87><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'g'; " 
              shape=RECT coords=178,64,200,87><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'f'; " 
              shape=RECT coords=148,63,170,86><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'd'; " 
              shape=RECT coords=118,64,142,89><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 's'; " 
              shape=RECT coords=90,64,112,87><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'a'; " 
              shape=RECT coords=60,64,84,86><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + ']'; " 
              shape=RECT coords=371,34,397,58><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + '['; " 
              shape=RECT coords=343,35,368,59><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'p'; " 
              shape=RECT coords=315,33,339,58><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'o'; " 
              shape=RECT coords=285,35,310,60><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'i'; " 
              shape=RECT coords=255,34,280,57><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'u'; " 
              shape=RECT coords=229,34,251,57><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'y'; " 
              shape=RECT coords=198,35,222,58><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 't'; " 
              shape=RECT coords=169,34,193,57><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'r'; " 
              shape=RECT coords=140,33,165,58><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'e'; " 
              shape=RECT coords=110,35,134,57><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'w'; " 
              shape=RECT coords=82,36,103,57><AREA
              onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'q'; " 
              shape=RECT
        coords=51,35,73,58></MAP>


now change this code to use an eval statement instead of directly binding the keyboard to one field
onclick="document.LOGIN.PassWord.value=document.LOGIN.PassWord.value + 'q'; " 
becomes
onclick=eval("document.LOGIN." + strFieldNameInput + ".value=document.LOGIN." + strFieldNameInput + ".value + 'q'"

Enjoy
0
 
LVL 10

Author Comment

by:kdwood
ID: 33511382
Greetings Orgrima and thanks for the quick response.

The problem that I have, which I should have stated in my post, was that I do not have access to the "input elements" in the body content.   This is a third party web based application that is basically a "screen scraper" for our iSeries(AS/400) applications.  
The application renders the content of the screen on the fly and I do not have access to any of the backend code.  

However, I do have access to the Header.html and Footer.HTML files.  My hope was to embed the virtual keyboard into the footer and simulate a hardware keypress into the current input field, without having to code anything on the individual input fields themselves.

Hope that makes sense.

Regards,

Keith

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33511778
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 2

Expert Comment

by:Orgrim
ID: 33512448
Hi,

The footer file will do it. You can access the document.form element from the body above. If they are in a frameset, use parrent.aboveframe.document.form.

Try it!
0
 
LVL 10

Author Comment

by:kdwood
ID: 33512481
Greetings gurvinder,

Yes I did look at those solutions and unfortunately they all require the developer to modify the input elements that will receive input from the keyboard.   As I stated above, I do not have access to the backend code of the rendered content.  I only have access to the Footer and Header of the web page.  

Thanks for the reply,

Keith
0
 
LVL 10

Author Comment

by:kdwood
ID: 33512502
Ok Orgrim,

I will give it a try.

Thanks again,

Keith
0
 
LVL 2

Accepted Solution

by:
Orgrim earned 500 total points
ID: 33512689
In your footer, you have two ways of adding script into the body where you cannot make changes:

1) add an event handler for every input field of the body
This will look like this:
<script>
document.LOGIN.PassWord.onfocus = ='"strFieldNameInput = this.name"';
</script>

2) add onfocus code into the body form (replacing the html)
This will look like this:
<script>
document.LOGIN.PassWord.innerHTML = '<input onfocus="strFieldNameInput = this.name"';
</script>

There is more ways to do it even

Have fun coding
0
 
LVL 10

Author Closing Comment

by:kdwood
ID: 33598501
Thank you for your help!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question