PDA

Xem đầy đủ chức năng : Bàn phím ảo



JavaScriptBank
29-11-2009, 06:52 PM
Một đoạn mã JavaScript (http://www.javascriptbank.com/javascript/) tạo công cụ (http://www.javascriptbank.com/javascript/utility/) bàn phím ảo trên trang web cho thao tác nhập liệu.

Bàn phím ảo này hỗ tr�... chi tiết (http://www.javascriptbank.com/virtualkeyboard-index.html/vi//) tại 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/vi/)
Demo: Bàn phím ảo (http://www.javascriptbank.com/virtualkeyboard-index.html/vi/)
| Virtual Keyboard (http://www.javascriptbank.com/virtualkeyboard-index.html)

Cách cài đặt

Bước 1: Dùng mã JavaScript để cài đặt hiệu ứng
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
-->


Bước 2: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
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
-->


Bước 3: Tải các file bên dưới về
Files
Virtual_Keyboard.zip (http://javascriptbank.com/javascript/utility/VirtualKeyboard/Virtual_Keyboard.zip)



Các hiệu ứng tương tự
- Chữ động kiểu gõ phím (http://www.javascriptbank.com/typing-text-2.html/vi/)
- Trình soạn thảo văn bản WYSIWYG mã nguồn mở (http://www.javascriptbank.com/wysiwyg-beta-index.html/vi/)
- Bàn phím ảo (http://www.javascriptbank.com/virtual-keyboard-tool.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Ứng dụng (http://www.javascriptbank.com/javascript/utility/vi/)





Tạo menu luôn ở đầu trang (http://www.javascriptbank.com/vi=menu luôn ở đầu trang) - Tạo trình đơn động (http://www.javascriptbank.com/javascript/menu/vi/) - Cách loại bỏ dấu tiếng Việt với JavaScript (http://www.javascriptbank.com/forum/cach-loai-bo-dau-tieng-viet-t114.html)