<html>
<head runat="server">
<title></title>
<script type="text/javascript" src="vkboard.js"></script>
<script><!--
// This example shows the very basic installation
// of the Virtual Keyboard.
//
// 'keyb_change' and 'keyb_callback' functions
// do all the job here.
var opened = false, vkb = null, text = null;
function keyb_change() {
document.getElementById("switch").innerHTML = (opened ? "Show keyboard" : "Hide keyboard");
opened = !opened;
if (opened && !vkb) {
// Note: all parameters, starting with 3rd, in the following
// expression are equal to the default parameters for the
// VKeyboard object. The only exception is 15th 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
}
else
vkb.Show(opened);
text = document.getElementById("textfield");
text.focus();
if (document.attachEvent)
text.attachEvent("onblur", backFocus);
}
function backFocus() {
if (opened) {
var l = text.value.length;
setRange(text, l, l);
text.focus();
}
}
// Callback function:
function keyb_callback(ch) {
var val = text.value;
switch (ch) {
case "BackSpace":
var min = (val.charCodeAt(val.length - 1) == 10) ? 2 : 1;
text.value = val.substr(0, val.length - min);
break;
case "Enter":
text.value += "\n";
break;
default:
text.value += ch;
}
}
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();
}
}
//--></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" width="60%">
<tr>
<td width="100px">
<textarea id="textfield" rows="12" cols="50"></textarea>
</td>
<td width="10px">
</td>
</tr>
</table>
<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">
Show keyboard</a></p>
<div id="keyboard">
</div>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment