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>