one keyboard for all input fields in a form?
in
9 posts,
2 voices
Salman Khimani
User
  |
Is there any way that i can have one keyboard(static version) working for all input fields present in a form?
For Example: Last form in the below link:
|
GreyWyvern
Script's Author
 |
That is a special modification of the code that depends on focus within a group of form elements to direct the input. Basically what the "Show Keyboard" button is doing there is to detect what form element is currently focused (probably by having a flag set onfocus) and then triggering the keyboard to appear for that element. To complete the effect, the individual keyboard images have been hidden. The aim of the static version is not to be everything to everyone so something like this would be up to the page author to devise. I can help you get started though. First I would set a global variable for use by all the form elements: var focusedInput = false;Then I would add focus and blur listeners to all of the appropriate form elements: ...
var input3 = document.getElementById('input3');
input3.onfocus = function() {
focusedInput = (elem.dir == "rtl") ? this.previousSibling : this.nextSibling;
};
input3.onblur = function() {
focusedInput = false;
};
var input4 = document.getElementById('input4');
...Then I would add a click listener to the main "Show keyboard" button at the bottom of the form. This listener would then forward the click to the element indicated by the global focusedInput variable.
var showKeyboard = document.getElementById('showKeyboard');
showKeyboard.onclick = function() {
if (focusedInput) focusedInput.onclick();
};To complete the script, I would then hide the other keyboard icons with CSS. They would still exist within the flow of the document because their event handers are required for the script to work, but they won't be visible to the user.
.keyboardInputInitiator {
margin:0px 3px;
vertical-align:middle;
cursor:pointer;
display:none;
}I'm not sure if this will work right off the bat since I'm typing it all here and not really testing. Hopefully this is a good start for you on your way to reproducing the effect found on your example page.
|
|
Salman Khimani
User
|
actually i gave that link as an example. Basically, i have to make this for this page: http://www.tskdesigners.com/gen3/login.php I can't get one thing, what should i put in <input /> tags and how will i call keyboard to work on those fields? before login button, m planning to have a keyboard image. When user clicks on that, a keyboard will show up to work on those fields. |
|
GreyWyvern
Script's Author
|
Just set it up first as in the instructions on the project page: http://www.greywyvern.com/code/javascript/keyboard Then work on adding the changes/additions I made in the post above. Like I said, they might not work as-is, and may take some modification. |
|
Salman Khimani
User
|
I did same as you said. Keyboard icons are disappeared and no keyboard is appearing when i click those input fields. i changed : var input3 = document.getElementById('input3');
-------------------to this: var input3 = document.getElementById('l_username');
------------------ as per my input field id's. But still not working. |
|
GreyWyvern
Script's Author
|
It's difficult to debug something like this over a forum system where the context isn't visible. The About page of the script has links that lead to my website and my contact form. You can either post a link to your working URI, or you can send it to me via my contact form. |
|
Salman Khimani
User
|
http://www.tskdesigners.com/gen3/login.php here is the URL m working on.
|
|
GreyWyvern
Script's Author
|
Salman, I've seen that page already and the keyboard icons are still visible. Are you working on this on another page? I need to see what problems you are having with the progress you have made. I can't implement the keyboard on your site for you; I can point out any bugs to you if you get stuck while implementing it yourself. |
Salman Khimani
User
 |
http://tskdesigners.com/gen3/login1.php this is the new link that m working on.
Thanks for support. |
