PDA

View Full Version : Virtual Keyboard


JavaScriptBank
11-30-2009, 12:16 AM
This JavaScript (http://www.javascriptbank.com/javascript/) integrates complete virtual keyboard solution to the any web page. It does support mouse input, as well as keyboard input translation. Plain text and rich te... detail (http://www.javascriptbank.com/virtualkeyboard-index.html/en//) at JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)

http://www.javascriptbank.com/javascript.images/utility/virtualkeyboard-index.jpg (http://www.javascriptbank.com/javascript/utility/virtualkeyboard-index/preview/en/)
Demo: Virtual Keyboard (http://www.javascriptbank.com/virtualkeyboard-index.html/en/)


How to setup

Step 1: Place JavaScript below in your HEAD section
JavaScript
<script type="text/javascript" src="vk_loader.js" ></script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->


Step 2: Place HTML below in your BODY section
HTML
<form action="no.cgi" method="get">
<div>
Subject:<br />

<input name="testa" id="testa" type="text" onfocus="VirtualKeyboard.attachInput(this)" /><br />
Password (has keyboard animation disabled):<br />
<input name="test_pwd" id="test_pwd" type="password" class="VK_no_animate" onfocus="VirtualKeyboard.attachInput(this)" /><br />
Text:<br />
<textarea name="testb" id="testb" type="text" cols="55" rows="10" wrap="soft" onfocus="VirtualKeyboard.attachInput(this)"></textarea>
<br />
<br />

<div id="td"></div>
<br />
<input id="showkb" type="button" value="Keyboard" onclick="VirtualKeyboard.toggle('testb','td'); return false;" />
</div>
<div id="dbg">
</div>
</form>
<script type="text/javascript">
EM.addEventListener(window,'domload',function(){
/*
* open the keyboard
*/
VirtualKeyboard.toggle('testb','td');
var el = document.getElementById('sul')
,lt = VirtualKeyboard.getLayouts()
,dl = window.location.href.replace(/[?#].+/,"")
for (var i=0,lL=lt.length; i<lL; i++) {
var cl = lt[i];
cl = cl[0]+" "+cl[1];
lt[i] = "<a href=\""+dl+"?vk_layout="+cl+"\" onclick=\"VirtualKeyboard.switchLayout(this.title);return false;\" title=\""+cl+"\" alt=\""+cl+"\" >"+cl+"</a>"
}
el.innerHTML += "<li>"+lt.join("</li><li>")+"</li>";
});
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->


Step 3: must download files below
Files
Virtual_Keyboard.zip (http://javascriptbank.com/javascript/utility/VirtualKeyboard/Virtual_Keyboard.zip)






JavaScript Spotlight (http://www.javascriptbank.com/spotlight-index.html) - JavaScript Validate E-Mail (http://www.javascriptbank.com/validate-e-mail.html) - AJAX Page Content Loader (http://www.javascriptbank.com/ajax-page-content-loader.html/en/)