JavaScript虚拟键盘

分享于 

5分钟阅读

Web开发

  繁體
  • 下载源-124.84 KB
  • Virtual keyboard bound to a TEXTAREA field

    安装程序

    六个简单步骤:

    下载源存档

    选择您的安装:

  • vkboard.js(档案中的1-vkboard文件夹)是主要脚本。全键盘模拟如下:

    Screenshot - jvk-full.jpg

  • vkboards.js (2-vkboard_slim文件夹)与上一个几乎相同,但是语言菜单可以通过单击键盘左下角的红色矩形来访问,

    Screenshot - jvk-slim.jpg

  • vnumpad.js (3-numpad_full文件夹)是键盘的numpad部分。

    numpad variant

  • vatmpad.js (4-numpad_atm文件夹)是一个精简的numpad,仅包含Enter和number键。

    numpad_atm variant

  • 在HTML页面中包含对所选脚本文件的引用:

    <HTML><HEAD><SCRIPTtype="text/javascript"src="vkboard.js"></SCRIPT>.. . 
     </HEAD>... 

    注意,对于每种类型的安装,有两个脚本文件可用:

  • vkboard.js/vkboards.js/vnumpad.js/vatmpad.js是原始脚本。如果你希望更改脚本或只想了解它工作方式,请查看以下文件
  • vkboardc.js/vkboardsc.js/vnumpadc.js/vatmpadc.js是脚本的压缩版本,分别比原始脚本小30.5%/30.5%/39.8%/39.5%。这是你应该在Web上使用的文件
  • 定义回调函数:

    <HTML><HEAD><SCRIPTtype="text/javascript"src="vkboard.js"></SCRIPT> <SCRIPT>
     // Minimal callback function:function keyb_callback(char)
     {
     // Let's bind vkeyboard to the <TEXTAREA>// with id="textfield":var text =
     document.getElementById("textfield"), 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;
     }
     }
     </SCRIPT></HEAD>.. . 

    给出一个更高级的代码片段示例后来

    定义键盘的容器,该容器必须为空的DIV或SPAN

    <HTML>.. . 
     <BODY>.. . 
     <TEXTAREAid="textfield"rows="10"cols="50"></TEXTAREA><DIVid="keyboard"></DIV></BODY></HTML>

    最后,显示键盘。

    <BODYonload="new VKeyboard("keyboard",keyb_callback);"><!-- VKeyboard is shown on load, bound to container with
     id="keyboard" and with callback function"keyb_callback"-->

    当然,创建VKeyboard -- numpad:VNumpad,ATM样式的数字键盘:VATMpad -可以在任何JavaScript代码可以使用的地方使用。

    API

    VKeyboard构造函数有很多参数可以帮助你控制它外观,下面是完整的列表和参数默认值。

    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, // reservedtrue, // 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 celltrue, // show key flash on click? (false by default)"#CC3300", // font color during flash"#FF9966", // key background color during flash"#CC3300", // key border color during flashfalse, // embed VKeyboard into the page?true, // use 1-pixel gap between the keys?0); // index (0-based) of the initial layout

    从早期版本升级vkeyboard时请小心,始终检查参数的数量,VNumpadVATMpad有一组有限的参数:

    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 colortrue, // 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 eventfalse, // embed VNumpad into the page?true); // use 1-pixel gap between the keys?

    JAVA  Javascript  KEY  Virtual  键盘  
    相关文章