/    Sign up×
Community /Pin to ProfileBookmark

Virtual keyboard help

hi,
Actually i am Using virtual keyboard in my application.
i have one function wich translates virtual keyboard layout to physical keyboard and we can type from physical keyboard in any language we choose from vitual keyboard.
my problem is that it is working good in Mozila but not in safari and IE
Actually one mehod like below
if(event.initKeyEvent) in condition
vent.initKeyEvent returns undefined in safari and IE so it wont go in If condition .
can anybody tell how to solve this problem ?

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@rnd_meNov 26.2008 — you will have to actually alter the .value or .innerHTML of whatever the keyboard is changing. you cannot simulate a keypress in IE like you can in firefox...

i can offer to look on any code you wish to post.
Copy linkTweet thisAlerts:
@jsfgeeksauthorNov 26.2008 — thanks

My translate function is as below:

function insertAtCaret(ctrl, val)

{

if(insertionS != insertionE) deleteSelection(ctrl);

if(gecko && document.createEvent && !window.opera)
{
var e = document.createEvent("KeyboardEvent");

if(e.initKeyEvent && ctrl.dispatchEvent)
{
e.initKeyEvent("keypress", // in DOMString typeArg,
false, // in boolean canBubbleArg,
true, // in boolean cancelableArg,
null, // in nsIDOMAbstractView viewArg, specifies UIEvent.view. This value may be null;
false, // in boolean ctrlKeyArg,
false, // in boolean altKeyArg,
false, // in boolean shiftKeyArg,
false, // in boolean metaKeyArg,
null, // key code;
val.charCodeAt(0));// char code.

ctrl.dispatchEvent(e);
}
}
else
{
var tmp = (document.selection && !window.opera) ? ctrl.value.replace(/r/g,"") : ctrl.value;
ctrl.value = tmp.substring(0, insertionS) + val + tmp.substring(insertionS, tmp.length);
}

setRange(ctrl, insertionS + val.length, insertionS + val.length);

}

// Translator function:

var pressedC = false;

function translate(event)

{

// alert("intranslate");

if(!vkb || !opened) return true;

var arr_type = vkb.AltGr ? (vkb.Shift ? "alt_gr_shift" : "alt_gr") : (vkb.Shift ? "shift" : (vkb.Caps ? "caps" : "normal"));
var lang_array = vkb[vkb.mod[7].innerHTML + "_" + arr_type];

if(!lang_array) return true;

if(!event) event = window.event;
var key = event.which ? event.which : event.keyCode;
alert(key);
switch(event.type)
{
case "keydown":

switch(key)
{
case 20: // Caps

if(!pressedC)
{
vkb.Caps = !vkb.Caps;
vkb._refresh_layout();

pressedC = true;
return true;
}
break;

case 18: // Alt(Gr)

vkb.AltGr = true;
vkb._refresh_layout();

return true;
break;

case 16: // Shift

vkb.Shift = true;
vkb._refresh_layout();

return true;
break;

default:
//alert("working");
if(event.initKeyEvent)
{
// alert("working1");
var code = String.fromCharCode(key).toUpperCase().charCodeAt(0);

if((code < 48) || (code > 222)) return true;

var keymap = [192,49,50,51,52,53,54,55,56,57,48,189,187, // ~ to =
81,87,69,82,84,89,85,73,79,80,219,221,220, // q to
65,83,68,70,71,72,74,75,76,186,222,, // a to '
90,88,67,86,66,78,77,188,190,191]; // z to /

if(navigator.product && (navigator.product.toLowerCase() == 'gecko'))
{
alert("ingeko");
keymap[11] = 109;
keymap[12] = 61;
keymap[36] = 59;
}

for(i = 0; i < keymap.length; i++)
{
if(keymap[i] == code)
break;
}

if((i > keymap.length) || !lang_array[i])
{
alert("inkeymapif");
event.returnValue = false;
if(event.preventDefault) event.preventDefault();

return false;
}

code = parseInt(String(lang_array[i]).substr(3, 4), 16);
alert(code);
var e = document.createEvent("KeyboardEvent");

e.initKeyEvent("keypress", // in DOMString typeArg,
false, // in boolean canBubbleArg,
true, // in boolean cancelableArg,
null, // in nsIDOMAbstractView viewArg, Specifies UIEvent.view. This value may be null.
false, // in boolean ctrlKeyArg,
false, // in boolean altKeyArg,
false, // in boolean shiftKeyArg,
false, // in boolean metaKeyArg,
code, null); // key code.

text.dispatchEvent(e);

event.returnValue = false;
if(event.preventDefault) event.preventDefault();

insertAtCaret(text, String.fromCharCode(code));
}

return true;
}

break;

case "keyup":

switch(key)
{
case 13: // Enter

case 9: // Tab

break;

case 20: // Caps

pressedC = false;
break;

case 18: // Alt(Gr)

vkb.AltGr = false;
vkb._refresh_layout();

return true;
break;

case 16: // Shift

vkb.Shift = false;
vkb._refresh_layout();

return true;
break;
}

break;

case "keypress":

switch(key)
{
case 13: // Enter

case 32: // Space

break;

default: // all other keys

if((key < 33) || (key > 222) || !(document.all || window.opera)) return true;
alert("inif");
var code = String.fromCharCode(key).toUpperCase().charCodeAt(0);

var keymap = [96,49,50,51,52,53,54,55,56,57,48,45,61, // ` to =
81,87,69,82,84,89,85,73,79,80,91,93,92, // q to
65,83,68,70,71,72,74,75,76,59,39,, // a to '
90,88,67,86,66,78,77,44,46,47]; // z to /

var keymap_sh = [126,33,64,35,36,37,94,38,42,40,41,95,43, // ~ to +
81,87,69,82,84,89,85,73,79,80,123,125,124, // q to |
65,83,68,70,71,72,74,75,76,58,34,, // a to "
90,88,67,86,66,78,77,60,62,63]; // z to ?

var map = vkb.Shift ? keymap_sh : keymap;

for(i = 0; i < map.length; i++)
if(map[i] == code)
break;

if((i > map.length) || !lang_array[i]) { event.returnValue = false; return false; }

code = parseInt(String(lang_array[i]).substr(3, 4), 16)

if(!window.opera) event.keyCode = code;

// cancel default behaviour:
event.returnValue = false;

insertAtCaret(text, String.fromCharCode(code));
}

return false;
}

return true;

}

in this in IE the if condition event.initkeyEvent not executed?
×

Success!

Help @jsfgeeks spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...