JavaScript VirtualKeyboard （JS虛擬鍵盤）
做觸摸屏項目用到的js軟鍵盤中文切換！
演示: http://debugger.ru/demo/projects/virtualkeyboard/demo_inline.html
下載: http://allanguages.info/
直接下載：http://debugger.ru/dl/vk/VirtualKeyboard.full.3.4.0.tar.gz
JavaScript VirtualKeyboard是 Javascript下 的虛擬鍵盤,不僅如此,它還 支持自建輸入法,你所看到的所有 內容都是由其內建輸入法所輸入,并且支持多種語言。
使用方法：
1 在<head></head>中加入
<script type="text/javascript" src="vk_loader.js?vk_layout=CN Chinese Simpl. Pinyin" ></script>
2 打開虛擬鍵盤：
VirtualKeyboard.toggle('target_input_field_id','keyboard_holder_id');
意思是：
VirtualKeyboard.toggle('顯示輸入數據的元素ID','顯示鍵盤所在位置的元素ID');
如： <input id="showkb" type="button" value="虛擬鍵盤" onclick="VirtualKeyboard.toggle('testb','keyboard'); return false;" />
當前僅支持IE6/7 on the local PC 。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
原文：
Using of the code is quite simple:
1.Add the following lines to the head:
<LINK title="virtualkeyboard" href="keyboard/keyboard.css" type="text/css" rel="stylesheet" /> <SCRIPT src="vk_loader.js" type="text/javascript"></SCRIPT>2.And the following lines somewhere at the page with edit form:
VirtualKeyboard.isOpen() ? VirtualKeyboard.close(): VirtualKeyboard.show('target_input_field_id','keyboard_holder_id');i.e. I use it in the event handler to open the keyboard on button click
3.(optional) Note: only IE6/7 on the local PC currently supported.
1.Run /setup/setup.html to generate desired layouts from the sources.
2.Copy /setup/out/layouts.js to /layouts/layouts.js
Yes, that's all. No need to write any code, or whatever else. The solution is really solid.
Demo: http://debugger.ru/demo/projects/virtualkeyboard/demo_inline.html
Site: http://debugger.ru/projects/virtualkeyboard
我測試用的完成代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Virtual Keyboard</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="vk_loader.js?vk_layout=CN Chinese Simpl. Pinyin" ></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<form action="" method="get">
<div>
主題:<br />
<input name="testa" id="testa" type="text" onfocus="VirtualKeyboard.attachInput(this)" /><br />
密碼 (可以用虛擬鍵盤輸入):<br />
<input name="test_pwd" id="test_pwd" type="password" class="VK_no_animate" onfocus="VirtualKeyboard.attachInput(this)" /><br />
內容:<br />
<textarea name="testb" id="testb" type="text" cols="55" rows="10" wrap="soft" onfocus="VirtualKeyboard.attachInput(this)"></textarea> <br />
<input id="showkb" type="button" value="虛擬鍵盤" onclick="VirtualKeyboard.toggle('testb','keyboard'); return false;" /><br />
<div id="keyboard"></div>
</div>
</form>
</td>
</tr>
</table>
</body>
</html>