📄 4-test-change.html
字号:
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="vkboard.js"></SCRIPT>
<SCRIPT type="text/javascript"><!--
// This example shows how to use 'SetParameters' method of the VKeyboard.
// Other than that, it is identical to the '1-edit-simple' sample.
var opened = false, vkb = null, text = null, insertionS = 0, insertionE = 0;
var userstr = navigator.userAgent.toLowerCase();
var isgecko = (userstr.indexOf('gecko') != -1) && (userstr.indexOf('applewebkit') == -1);
// 'CurKeyColor' object will contain current color of the keyboard:
var CurKeyColor = new Object();
CurKeyColor.r = 255;
CurKeyColor.g = 255;
CurKeyColor.b = 255;
function keyb_change()
{
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 numpad or not? (this and the following params are optional)
"", // 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
}
// We're going to adjust keyboard and font color every half of a second:
setInterval(shift_colors, 500);
text = document.getElementById("textfield");
text.focus();
if(document.attachEvent)
text.attachEvent("onblur", backFocus);
}
function backFocus()
{
if(opened)
{
var l = text.value.length;
setRange(text, insertionS, insertionE);
text.focus();
}
}
// This function adjusts the colors of vkeyboard in a random way:
function shift_colors()
{
// Determine what color to shift:
var x = Math.floor(9 * Math.random());
// Make a "step" in a chosen color:
if (x < 3) { CurKeyColor.r = Step(CurKeyColor.r, 0, 255); }
else if(x < 6) { CurKeyColor.g = Step(CurKeyColor.g, 0, 255); }
else { CurKeyColor.b = Step(CurKeyColor.b, 0, 255); }
// Shift color of keys of the vkeyboard:
var kc = "#" + dec2hex(CurKeyColor.r) + dec2hex(CurKeyColor.g) + dec2hex(CurKeyColor.b);
// Font color of the vkeyboard is complementary to the key color:
var fc = "#" + dec2hex(255 - CurKeyColor.r) + dec2hex(255 - CurKeyColor.g) + dec2hex(255 - CurKeyColor.b);
// Show both colors (in hex) to user:
document.getElementById("colors").innerHTML = "Key color: " + kc + ", font color: " + fc;
// This is the main call. Note that parameters and parameter values
// come in pairs.
//
vkb.SetParameters("key-color", kc, "font-color", fc);
}
// Simple conversion from int to hex string:
function dec2hex(dec)
{
var hexChars = "0123456789ABCDEF";
var a = dec % 16;
var b = (dec - a) / 16;
return hexChars.charAt(b) + hexChars.charAt(a);
}
// Function that adjusts the color values:
var CountDown = false;
function Step(value, min, max)
{
if(CountDown)
{
value -= 5;
if(value < min)
{
value = min;
CountDown = !CountDown;
}
}
else
{
value += 5;
if(value > max)
{
value = max;
CountDown = !CountDown;
}
}
return value;
}
// 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;
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(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(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, 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="keyb_change()";>
<P style="font-family:Tahoma;font-size:14px">Virtual keyboard test #4: adjusting vkeyboard parameters (key color & font color) at run-time.</P>
<P id="colors" style="font-family:Tahoma;font-size:14px">Key color:</P>
<TABLE border="0" width="60%">
<TR>
<TD width="100px"><TEXTAREA onkeyup="getCaretPositions(this);" onclick="getCaretPositions(this);" id="textfield" rows="12" cols="50"></TEXTAREA></TD>
<TD width="10px"></TD><TD><DIV width="50px" align="justify">Wait a few seconds. Then a few seconds more. And more. Keep looking at the vkeyboard and at a string above the TEXTAREA.<BR><BR>When you've had enougth, right click on the page and View Page Source.</DIV></TD>
</TR>
</TABLE>
<DIV id="keyboard"></DIV>
</BODY></HTML>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -