|
I am using 3-edit-translator.html in which the parameter for the constructor is set to "true" as mentioned by you.
What i want is; if the user is using the keyboard (physical h/w) to keying the data i want the virtual keyboard to highlight (flash) the keys pressed on the h/w?
thanks.
|
|
|
|
|
I'll try to create such a script in a next few days.
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Dvorak (UsD) and colemak (UsC) keyboard layouts
www.dvorak-keyboards.com
www.colemak.com
(i had problem with posting the code with '&#x' hence please replace $$ with the '&#x'
<pre>
<code>
UsD_normal: [ ["$$60;", "Grave"], "$$31;", "$$32;", "$$33;", "$$34;", "$$35;", "$$36;", "$$37;", "$$38;", "$$39;", "$$30;", "$$2D;", "$$3D;",
"$$2F;", "$$2C;", "$$2E;", "$$70;", "$$79;", "$$66;", "$$67;", "$$63;", "$$72;", "$$6C;", "$$5B;", "$$5D;", "$$5C;",
"$$61;", "$$6F;", "$$65;", "$$75;", "$$69;", "$$64;", "$$68;", "$$74;", "$$6E;", "$$73;", "$$27;", ,
"$$3B;", "$$71;", "$$6A;", "$$6B;", "$$78;", "$$62;", "$$6D;", "$$77;", "$$76;", "$$7A;",
],
UsD_caps: [ ["$$60;", "Grave"], "$$31;", "$$32;", "$$33;", "$$34;", "$$35;", "$$36;", "$$37;", "$$38;", "$$39;", "$$30;", "$$2D;", "$$3D;",
"$$2F;", "$$2C;", "$$2E;", "$$50;", "$$59;", "$$46;", "$$47;" "$$43;", "$$52;" "$$4C;", "$$5B;", "$$5D;", "$$5C;",
"$$41;", "$$4F;", "$$45;", "$$55;", "$$49;", "$$44;", "$$48;", "$$54;", "$$4E;", "$$53;", "$$27;", ,
"$$3B;", "$$51;", "$$4A;", "$$4B;", "$$58;", "$$42;", "$$4D;", "$$57;", "$$56;", "$$5A;",
],
UsD_shift: [ ["$$7E;", "Tilde"], "$$21;", "$$40;", "$$23;", "$$24;", "$$25;",
["$$5E;", "Circumflex"], "$$26;", "$$2A;", "$$28;", "$$29;", "$$5F;", "$$2B;",
"$$3F;", "$$3C;", "$$3E;", "$$50;", "$$59;", "$$46;", "$$47;", "$$43;", "$$52;", "$$4C;", "$$7B;", "$$7D;", "$$7C;",
"$$41;", "$$4F;", "$$45;", "$$55;", "$$49;", "$$44;", "$$48;", "$$54;", "$$4E;", "$$53;", "$$22;", ,
"$$3A;", "$$51;", "$$4A;", "$$4B;", "$$58;", "$$42;", "$$4D;", "$$57;", "$$56;", "$$5A;",
],
// colemak keyboard
UsC_normal: [ ["$$60;", "Grave"], "$$31;", "$$32;", "$$33;", "$$34;", "$$35;", "$$36;", "$$37;", "$$38;", "$$39;", "$$30;", "$$2D;", "$$3D;",
"$$71;", "$$77;", "$$66;", "$$70;", "$$67;", "$$6A;", "$$6C;", "$$75;", "$$79;", "$$3A;", "$$5B;", "$$5D;", "$$5C;",
"$$61;", "$$72;", "$$73;", "$$74;", "$$64;", "$$68;", "$$6E;", "$$65;", "$$69;", "$$6F;", "$$22;", ,
"$$7A;", "$$78;", "$$63;", "$$76;", "$$62;", "$$6B;", "$$6D;", "$$2C;", "$$2E;", "$$2F;"
],
UsC_caps: [ ["$$60;", "Grave"], "$$31;", "$$32;", "$$33;", "$$34;", "$$35;", "$$36;", "$$37;", "$$38;", "$$39;", "$$30;", "$$2D;", "$$3D;",
"$$51;", "$$57;", "$$46;", "$$50;", "$$47;", "$$4A;", "$$4C;", "$$55;", "$$59;", "$$3B;", "$$5B;", "$$5D;", "$$5C;",
"$$41;", "$$52;", "$$53;", "$$54;", "$$44;", "$$48;", "$$4E;", "$$45;", "$$49;", "$$4F;", "$$27;", ,
"$$5A;", "$$58;", "$$43;", "$$56;", "$$42;", "$$4B;", "$$4D;", "$$2C;", "$$2E;", "$$2F;"
],
UsC_shift: [ ["$$7E;", "Tilde"], "$$21;", "$$40;", "$$23;", "$$24;", "$$25;",
["$$5E;", "Circumflex"], "$$26;", "$$2A;", "$$28;", "$$29;", "$$5F;", "$$2B;",
"$$51;", "$$57;", "$$46;", "$$50;", "$$47;", "$$4A;", "$$4C;", "$$55;", "$$59;", "$$3B;", "$$7B;", "$$7D;", "$$7C;",
"$$41;", "$$52;", "$$53;", "$$54;", "$$44;", "$$48;", "$$4E;", "$$45;", "$$49;", "$$4F;", "$$27;", ,
"$$5A;", "$$58;", "$$43;", "$$56;", "$$42;", "$$4B;", "$$4D;", "$$3C;", "$$3E;", "$$3F;"
],</code></pre>
|
|
|
|
|
I have noticed users at my kiosk implementation of the virtual keyboard pausing in search of the "spacebar". Although most users will know where the spacebar is, how can I include the text "Spacebar" on the keyboard? I tried altering vkboard.js by adding kb_space.innerHTML = "Spacebar"; but this did not add the text over the spacebar. Suggestions?
Thanks,
Jerry
|
|
|
|
|
Hi Jerry,
McJerry wrote: how can I include the text "Spacebar" on the keyboard?
1. In the _refresh_layout method, search for the line:
key.innerHTML = this.DeadAction[1] ? this.DeadAction[0] : " "; Change it to:
key.innerHTML = this.DeadAction[1] ? this.DeadAction[0] : "Space";
2. In the _generic_callback_proc method, search for the line:
case " ": val = " "; break; Change it to:
case "Space": val = " "; break; Hope it helps Best regards,
- Dmitry.
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Thanks Dmitry! That worked perfectly.
I was using a different javascript virtual keyboard implementation but users were struggling due to multiple issues. I have noticed an instantaneous improvement in user response since deploying your script. Before, users would simply become frustrated and walk away from the kiosk...now they find it much easier to complete the web form. I contribute this to the ease of use offered after customizing your keyboard layout.
Have a great Week!
-Jerry
|
|
|
|
|
This works well.
Is there any way to make the "Space" label appear non-bold like the other "special" keys (Enter, Tab, Shift, etc.)? Yes, in reality "Space" is a character like 'A', '?', etc., but it seems more like a "special" key.
Also (and speaking of...), is there a way to set a different color for the special keys?
Thanks,
Jelks
|
|
|
|
|
Today, on the 10th of April, Virtual Keyboard celebrates it's 2nd year of existence. Thank you everyone who supported it with ideas, bugfixes, money
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
modified on Thursday, April 10, 2008 12:47 PM
|
|
|
|
|
When I jump (with Tab) to a new field, the caret is not visible.
So I dont know "where I am" before I start typing
And the caret also disappears in any field when I'm start typing. It's the fact for both test-fly and test-fly-anonym.
/Benny
|
|
|
|
|
Perhaps there is an explanation.
But after I've changed the _set_key_state to "mouseup" event the caret is visible !
Thanks again.
/Benny
|
|
|
|
|
Another issue:
When you type fast on different keys it works fine.
But if you type faste twice on the same key, only one letter is transformed to the input field.
If you type 4 equal letters 2 of them are displayed.
If you type 6 equal letters 3 of them are displayed.
etc. etc.
Where do I have to look to find the place where this "delay" is defined ?
The problem exist both with key flash on and off.
/Benny
modified on Friday, February 8, 2008 7:30 AM
|
|
|
|
|
Hi,
Benny Nielsen wrote: Where do I have to look to find the place where this "delay" is defined ?
It is not "defined". What you should do is to change the "mousedown" event in the _set_key_state method to "mouseup". This will solve this typing issue.
Best regards,
- Dmitry.
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
You are the greatest !!!
|
|
|
|
|
Great job !
I have tried the test-fly-anonym and it works perfect.
Almost ...
I have only single lines text (no textareas) and I would like to "jump" to the next field on my form when the user press TAB or Enter.
Any possibilities ?
Regards
Benny
|
|
|
|
|
Hi!
Member 4531434 wrote: I have only single lines text (no textareas) and I would like to "jump" to the next field on my form when the user press TAB or Enter.
in the '6-test-fly-anonym.html' file, search for the keyb_callback method. In the switch block inside it, you should add cases for \t (tab key) and \n (enter key). Then you can write these cases to focus() to a next field.
Hope it helps,
- Dmitry.
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Thank you very much !
It works for \t but not for \n ?
Can you explain this ?
/Benny
modified on Tuesday, February 05, 2008 8:44:12 AM
|
|
|
|
|
I solved it myself.
It's not the switch \n but the switch Enter you may use
|
|
|
|
|
I am not entirely knowledgeable with making the changes necessary to make the tab key jump to the next field. Would you share the code changes you made to get this to work?
Thanks,
-Jerry
|
|
|
|
|
In the keyb_callback function I added the cases:
case "\t":
doNext(source);
getCaretPositions(source);
break;
case "Enter":
doNext(source);
getCaretPositions(source);
break;
Where doNext is:
function doNext(el)
{
var f = el.form;
var els = f.elements;
var x, hit, nextEl;
for (var i=0, len=els.length; i<(len-1); i++){
x = els[i];
if (el == x && (nextEl = els[i+1])){
if (nextEl.focus) nextEl.focus();
hit = i;
}
}
el = els[hit+1];
}
I hope this will help you.
Regards
Benny
|
|
|
|
|
Sorry but I came to a new question:
When I jump to a new field, the cursor mark is not visible.
So I dont know "where I am" before I start typing
And the cursor mark also disappears in any field when I'm starting typing. It's the fact for both test-fly and test-fly-anonym.
/Benny
modified on Tuesday, February 05, 2008 8:44:39 AM
|
|
|
|
|
Hi there~
1st of all, thank you(creator) for this keyboard, it has helped me alot~
Anyways i've been wondering how to show and hide the keyboard for this example(5-test-fly.html), i tried following the 2-edit-full.html example and edit it from there but still can't get it to work, the keyboard wouldn't enter anything into the textfields, i think it has something to do with the focus.
Hope someone can help out here~ Thanks!
|
|
|
|
|
Mark Ng wrote: 1st of all, thank you(creator) for this keyboard, it has helped me alot~
You're welcome
Mark Ng wrote: Anyways i've been wondering how to show and hide the keyboard for this example(5-test-fly.html)
I think it's quite easy. First, you need to assign a VKeyboard a variable (if you look at the code, you'll see that, after creation, reference to the VKeyboard object is not assigned to any variable). Then, you need to add a "Show/Hide keyboard" link, like in the '2-edit-full.html'. This way, you can show or hide the VKeyboard.
Is it clear? If not, I'll post a solution later.
Best regards,
- Dmitry.
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Wow thanks for the quick reply
I made a little progress whereby i could click on show keyboard and make it appear but i couldn't close it afterwards :P
So maybe a solution would be of great help.
Thanks!
|
|
|
|
|
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="vkboard.js"></SCRIPT>
<SCRIPT><!--
// This example shows how to handle multiple INPUT
// fields with a single vkeyboard.
// 'source' is the field which is currently focused:
var source = null, vkb = null, opened = true, insertionS = 0, insertionE = 0;
var userstr = navigator.userAgent.toLowerCase();
var safari = (userstr.indexOf('applewebkit') != -1);
var gecko = (userstr.indexOf('gecko') != -1) && !safari;
var standr = gecko || window.opera || safari;
// This function retrieves the source element
// for the given event object:
function get_event_source(e)
{
var event = e || window.event;
return event.srcElement || event.target;
}
// This function binds 'handler' function to the
// 'eventType' event of the 'elem' element:
function setup_event(elem, eventType, handler)
{
return (elem.attachEvent) ? elem.attachEvent("on" + eventType, handler) : ((elem.addEventListener) ? elem.addEventListener(eventType, handler, false) : false);
}
// By focusing the INPUT field we set the 'source'
// to the newly focused field:
function focus_keyboard(e)
{
source = get_event_source(e);
}
// By "registering" the field we bind 'focus_keyboard'
// function to 'focus' event of the given INPUT field:
function register_field(id)
{
setup_event(document.getElementById(id), "focus", focus_keyboard);
}
// The same creation precedure as usual, with a single
// difference that we're "registering" 3 INPUT fields:
function init()
{
// Note: all parameters, starting with 3rd, in the following
// expression are equal to the default parameters for the
// VKeyboard object. The only exception is 18th parameter
// (flash switch), which is false by default.
vkb = new VKeyboard("keyboard", // container's id
keyb_callback, // reference to the callback function
true, // create the arrow keys or not? (this and the following params are optional)
true, // create up and down arrow keys?
false, // reserved
true, // create the numpad or not?
"", // font name ("" == system default)
"14px", // font size in px
"#000", // font color
"#F00", // font color for the dead keys
"#FFF", // keyboard base background color
"#FFF", // keys' background color
"#DDD", // background color of switched/selected item
"#777", // border color
"#CCC", // border/font color of "inactive" key (key with no value/disabled)
"#FFF", // background color of "inactive" key (key with no value/disabled)
"#F77", // border color of the language selector's cell
true, // show key flash on click? (false by default)
"#CC3300", // font color during flash
"#FF9966", // key background color during flash
"#CC3300", // key border color during flash
false, // embed VKeyboard into the page?
true, // use 1-pixel gap between the keys?
0); // index(0-based) of the initial layout
// 'field1' is "focused" by default:
source = document.getElementById("field1");
register_field("field1"); register_field("field2"); register_field("field3");
source.focus();
}
function keyb_change()
{
opened = !opened;
vkb.Show(opened);
}
// Advanced callback function:
//
function keyb_callback(ch)
{
var val = source.value;
switch(ch)
{
case "BackSpace":
if(val.length)
{
var span = null;
if(document.selection)
span = document.selection.createRange().duplicate();
if(span && span.text.length > 0)
{
span.text = "";
getCaretPositions(source);
}
else
deleteAtCaret(source);
}
break;
case "<":
if(insertionS > 0)
setRange(source, insertionS - 1, insertionE - 1);
break;
case ">":
if(insertionE < val.length)
setRange(source, insertionS + 1, insertionE + 1);
break;
case "/\\":
if(!standr) break;
var prev = val.lastIndexOf("\n", insertionS) + 1;
var pprev = val.lastIndexOf("\n", prev - 2);
var next = val.indexOf("\n", insertionS);
if(next == -1) next = val.length;
var nnext = next - insertionS;
if(prev > next)
{
prev = val.lastIndexOf("\n", insertionS - 1) + 1;
pprev = val.lastIndexOf("\n", prev - 2);
}
// number of chars in current line to the left of the caret:
var left = insertionS - prev;
// length of the prev. line:
var plen = prev - pprev - 1;
// number of chars in the prev. line to the right of the caret:
var right = (plen <= left) ? 1 : (plen - left);
var change = left + right;
setRange(source, insertionS - change, insertionE - change);
break;
case "\\/":
if(!standr) break;
var prev = val.lastIndexOf("\n", insertionS) + 1;
var next = val.indexOf("\n", insertionS);
var pnext = val.indexOf("\n", next + 1);
if( next == -1) next = val.length;
if(pnext == -1) pnext = val.length;
if(pnext < next) pnext = next;
if(prev > next)
prev = val.lastIndexOf("\n", insertionS - 1) + 1;
// number of chars in current line to the left of the caret:
var left = insertionS - prev;
// length of the next line:
var nlen = pnext - next;
// number of chars in the next line to the left of the caret:
var right = (nlen <= left) ? 0 : (nlen - left - 1);
var change = (next - insertionS) + nlen - right;
setRange(source, insertionS + change, insertionE + change);
break;
default:
insertAtCaret(source, (ch == "Enter" ? (window.opera ? '\r\n' : '\n') : ch));
}
}
// This function retrieves the position (in chars, relative to
// the start of the text) of the edit cursor (caret), or, if
// text is selected in the TEXTAREA, the start and end positions
// of the selection.
//
function getCaretPositions(ctrl)
{
var CaretPosS = -1, CaretPosE = 0;
// Mozilla way:
if(ctrl.selectionStart || (ctrl.selectionStart == '0'))
{
CaretPosS = ctrl.selectionStart;
CaretPosE = ctrl.selectionEnd;
insertionS = CaretPosS == -1 ? CaretPosE : CaretPosS;
insertionE = CaretPosE;
}
// IE way:
else if(document.selection && ctrl.createTextRange)
{
var start = end = 0;
try
{
start = Math.abs(document.selection.createRange().moveStart("character", -10000000)); // start
if (start > 0)
{
try
{
var endReal = Math.abs(ctrl.createTextRange().moveEnd("character", -10000000));
var r = document.body.createTextRange();
r.moveToElementText(ctrl);
var sTest = Math.abs(r.moveStart("character", -10000000));
var eTest = Math.abs(r.moveEnd("character", -10000000));
if ((ctrl.tagName.toLowerCase() != 'input') && (eTest - endReal == sTest))
start -= sTest;
}
catch(err) {}
}
}
catch (e) {}
try
{
end = Math.abs(document.selection.createRange().moveEnd("character", -10000000)); // end
if(end > 0)
{
try
{
var endReal = Math.abs(ctrl.createTextRange().moveEnd("character", -10000000));
var r = document.body.createTextRange();
r.moveToElementText(ctrl);
var sTest = Math.abs(r.moveStart("character", -10000000));
var eTest = Math.abs(r.moveEnd("character", -10000000));
if ((ctrl.tagName.toLowerCase() != 'input') && (eTest - endReal == sTest))
end -= sTest;
}
catch(err) {}
}
}
catch (e) {}
insertionS = start;
insertionE = end
}
}
function setRange(ctrl, start, end)
{
if(ctrl.setSelectionRange) // Standard way (Mozilla, Opera, Safari ...)
{
ctrl.setSelectionRange(start, end);
}
else // MS IE
{
var range;
try
{
range = ctrl.createTextRange();
}
catch(e)
{
try
{
range = document.body.createTextRange();
range.moveToElementText(ctrl);
}
catch(e)
{
range = null;
}
}
if(!range) return;
range.collapse(true);
range.moveStart("character", start);
range.moveEnd("character", end - start);
range.select();
}
insertionS = start;
insertionE = end;
}
function deleteSelection(ctrl)
{
if(insertionS == insertionE) return;
var tmp = (document.selection && !window.opera) ? ctrl.value.replace(/\r/g,"") : ctrl.value;
ctrl.value = tmp.substring(0, insertionS) + tmp.substring(insertionE, tmp.length);
setRange(ctrl, insertionS, insertionS);
}
function deleteAtCaret(ctrl)
{
// if(insertionE < insertionS) insertionE = insertionS;
if(insertionS != insertionE)
{
deleteSelection(ctrl);
return;
}
if(insertionS == insertionE)
insertionS = insertionS - 1;
var tmp = (document.selection && !window.opera) ? ctrl.value.replace(/\r/g,"") : ctrl.value;
ctrl.value = tmp.substring(0, insertionS) + tmp.substring(insertionE, tmp.length);
setRange(ctrl, insertionS, insertionS);
}
// This function inserts text at the caret position:
//
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);
}
//--></SCRIPT></HEAD>
<BODY onload="init()">
<P style="font-family:Tahoma;font-size:14px">Virtual keyboard test #5: changing target text field on the fly.<BR>
<SMALL>Text is streamed to the field last focused.</SMALL></P>
<INPUT id="field1" type="text" size="40" onkeyup="getCaretPositions(this);" onclick="getCaretPositions(this);"></INPUT><BR><BR>
<INPUT id="field2" type="text" size="40" onkeyup="getCaretPositions(this);" onclick="getCaretPositions(this);"></INPUT><BR><BR>
<TEXTAREA id="field3" type="text" rows="12" cols="34" onkeyup="getCaretPositions(this);" onclick="getCaretPositions(this);"></TEXTAREA><BR><BR>
<P><A href="javascript:keyb_change()" onclick="javascript:blur()" id="switch" style="font-family:Tahoma;font-size:14px;text-decoration:none;border-bottom: 1px dashed #0000F0;color:#0000F0">Hide keyboard</A></P>
<DIV id="keyboard"></DIV>
</BODY></HTML>
-------------------------
Listen up! "Teamwork" means staying out of my way! (Seifer, Final Fantasy 8).
|
|
|
|
|
Thanks Dmitry!
Has helped alot~ And will continue improving my programming which needs some working on
|
|
|
|
|