----8<----
----8<----
----8<----
JavaScript Virtual Keyboard (Джава Клавиатура)
IntroductionImagine that you are sitting in a London internet cafe wishing to write an e-mail to your family living in Athens. It's good if someone in your family speaks English. If not, where would you find a keyboard with a Greek layout? I'm sure you can recall a dozen situations when you thought, "I wish I had another keyboard." This article presents the Virtual Keyboard that solves this usability problem. The design task for it can be specified as follows:
Installation of the Virtual Keyboard requires a casual knowledge of HTML and JavaScript. To be able to fine-tune the script, you must be familiar with W3C DOM Level 1, CSS Level 1 and the DOM/MS IE event model. Virtual Keyboard is an open-source script distributed under the zlib/libpng license. SetupSix easy steps:
APIThe var vkb =
new VKeyboard("keyboard", // container's id, mandatory
keyb_callback,// reference to callback function, mandatory
// (this & following parameters are optional)
true, // create the arrow keys or not?
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 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
Please be careful when upgrading vkeyboard from earlier versions. Always check the number/flow of the parameters. var vkb =
new VNumpad("numpad", // container's id, mandatory
pad_callback, // reference to the callback function, mandatory
"", // font name ("" == system default)
// (this and following parameters are optional)
"14px", // font size in px
"#000", // font color
"#FFF", // keyboard base background color
"#FFF", // keys' background color
"#777", // border color
true, // show key flash on /click? (false by default*)
"#CC3300", // font color for flash event
"#FF9966", // key background color for flash event
"#CC3300", // key border color for flash event
false, // embed VNumpad into the page?
true); // use 1-pixel gap between the keys?
Note that although "flash switch" is off by default, it is switched on in all of the provided samples.
Test suiteThe script comes with the following samples:
Note that all of the above samples can be found in the vkboard folder of the source archive. Variants other than the full keyboard are not provided with the full test suite, only with a single sample that shows the most simple installation of every variant. Creating your own language layoutTwo easy steps:
Creating your own keyboard layoutYou may wish to create a custom key layout. There are two ways to achieve this:
Call from beyondOne natural feature that all users expect from a text field is the ability to edit the text at any position within a field. However, it is impossible to do so with a function described earlier, which only appends symbols to or removes from the end of the text. The following script is an attempt to write a compatible callback function to fulfill the described task. It is largely based on the discussion in the thescripts.com forum. <HEAD>
<SCRIPT type="text/javascript"><!--
var opened = false,
insertionS = -1, // selection start
insertionE = 0; // selection end
var userstr = navigator.userAgent.toLowerCase();
var safari = (userstr.indexOf('applewebkit') != -1);
var gecko = (userstr.indexOf('gecko') != -1) && !safari;
var standr = gecko || window.opera || safari;
...
// Advanced callback function:
//
function keyb_callback(ch)
{
var val = text.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(text);
}
else
deleteAtCaret(text);
}
break;
case "<":
if(insertionS > 0)
setRange(text, insertionS - 1, insertionE - 1);
break;
case ">":
if(insertionE < val.length)
setRange(text, 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(text, 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(text, insertionS + change, insertionE + change);
break;
default:
insertAtCaret(text,
(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, ...)
{
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(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(isgecko && 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,
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>
...
<-- Don't forget this 'onclick' and 'onkeyup': -->
<TEXTAREA onkeyup="getCaretPositions(this);"
onclick="getCaretPositions(this);"
id="textfield" rows="12" cols="50">
</TEXTAREA>
...
</BODY>
Note that the up and down arrows on a virtual keyboard work only on standards-compliant browsers! Take this into account when creating touch screen applications. You can test the above script by running the 2-edit-full.html file found in the vkboard folder of the attached archive. Basic callback is demonstrated in 1-edit-simple.html. Tips and tricksScript flow is quite straightforward, so I hope it won't be hard to dive into it. Here is a couple of words on a few tricky places.
CodaVirtual Keyboard features at a glance
Script requirementsAny browser that is aware of:
Links
History
LicenseThis article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below. A list of licenses authors might use can be found here About the Author
 |
----8<----
|
|