Home > Developer > JavaScript
Create a personalized and powerful Jquery virtual keyboard (VirtualKeyboard) and virtualkeyboard
Recently I am working on a project. I am responsible for the front-end of a webpage. The customer needs to use a touch screen for operations without an external mouse or keyboard. However, he must be able to enter text, including numbers, English letters, and Chinese characters. After thinking about it, I decided to use JS to implement the virtual keyboard.
First, I searched for the JS virtual keyboard online. After careful screening, I chose VirtualKeyboard, a powerful JS virtual keyboard plug-in.
First, let's briefly introduce VirtualKeyboard. It has over 100 built-in keyboard la S and over 200 input methods, 9 sets of Skin options, and supports self-built input methods. The functions are quite powerful.
First attached, the latest version of the current 3.94: http://www.corallosoftware.it/Download/download.html this tutorial is used 3.71 is not provided separately to download, there is a need for friends can download my modified, at the end of the article
Download the demo file and open Jsvk \ jscripts \ demo_inline.html in sequence. The virtual keyboard is pretty and supports Chinese Pinyin input, which is exactly as expected. As shown in:
Integrate it into the project. Just do what you say!
First, copy the files under the Jsvk \ jscripts directory to the project, and delete the text files and html demo files.
Reference JS files on the project page:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jscripts/vk_loader.js? Vk_layout = CN % 20 Chinese % 20Simpl. % 20 Pinyin & vk_skin = flat_gray "> </script>
Explanation: vk_layout = CN % 20 Chinese % 20Simpl. % 20 Pinyin indicates that the default input method is set to simplified Chinese,
Vk_skin = flat_gray indicates that flat_gray is used by default for skin. You can set these two parameters as needed.
Call/hide functions of the virtual keyboard:
VirtualKeyboard. toggle ("txt_Search", "softkey ");
Txt_Search is the text box ID, and softkey is the ID of the position element displayed on the virtual keyboard.
The following is a simple example:
Copy codeThe Code is as follows:
<Html>
<Head>
<Script type = "text/javascript" src = "vk_loader.js? Vk_layout = CN % 20 Chinese % 20Simpl. % 20 Pinyin & vk_skin = flat_gray "> </script>
</Head>
<Body>
<Input type = "text" id = "txt_Search" onfocus = "VirtualKeyboard. toggle ('txt _ search', 'softkey') "onblur =" VirtualKeyboard. toggle ('txt _ search', 'softkey'); "/>
<Div id = "softkey"> </div>
</Body>
</Html>
Effect:
Customize the functions you need step by step
The basic function is implemented, and the next step is to switch between Chinese and English. First, click CapsLock to switch to uppercase. The result is disappointing. In Chinese, the Chinese language is switched to uppercase and the Chinese language is still used. You can only click the input method selection menu in the lower-right corner, find US, and switch to the English input method. This is not the case. You have to switch back and forth among the hundreds of options each time. How bad the user experience is!
So I had a preliminary idea: Clear the drop-down list and manually create a list with only Chinese and English options. To clear the drop-down list, you must first know its ID. This layer is generally dynamically created, so you can find Jsvk \ jscripts \ virtualkeyboard. js. As expected, the code is compressed and can be directly understood by humans. So we need to decompress it first. Open http://jsbeautifier.org/and copy the code in the JS file to the input box. Click "cancel" to complete the operation. Ctrl + a, ctrl + c copy to the new JS file, OK, you can read it. Search for the "<select" keyword. The Code is as follows:
"<Select id = \" kb_langselector \ "> </select>" + "<select id = \" kb_mappingselector \ "> </select>"
Kb_mappingselector is the ID of the keyboard layout selection box, kb_langselector is the ID of the Input Method Selection box, And kb_langselector is the ID we want.
With the ID, you can modify it. Because it is dynamically created, the ID can be obtained only after the creation is complete, so I write the code to the virtual keyboard to load it.
The following code uses the JQuery framework. You must reference JQuery before using it.
Copy codeThe Code is as follows:
Function test (){
$ ("# Kb_langselector "). empty (). append ("<option value = 'us'> English </option> <option value = 'cn Chinese Simpl. pinyin '> Chinese </option> "). change (function (){
VirtualKeyboard. switchLayout (this. value); return false;
});
}
A problem was found during the test. The load was stopped at 10% and a JS error was prompted on the page.
I guess there is a problem with the option I built through the error description, but I haven't found the specific problem after tracking and debugging. If any hero finds the error, I 'd like to tell you!
If an error persists, change your mind!
The preliminary assumption failed, so I changed my mind. Since there is a problem with my build, well, I don't want to build it. You can build it yourself, but I don't need it.
According to this idea, I re-studied the Loading Code and found that the JS loaded by the input method is defined in Jsvk \ jscripts \ layouts. js. Therefore, the redundant options are deleted, leaving only the Chinese Simpl. Pinyin and US options. After the change, there are only two options: Chinese and English.
This is not what I want!
The switch between Chinese and English is implemented, but the operation is not convenient enough. What I need is one-click switch. Why not add a switch key in the keyboard?
First, find the skin file \ Jsvk \ jscripts \ css \ flat_gray \ button_set.png. I need to manually add a button!
Source image:
After modification:
It is not enough to change the image only. click the button in the style sheet and continue to modify the style sheet! Add the following code to the style sheet \ Jsvk \ jscripts \ css \ flat_gray \ keyboard.css.
Copy codeThe Code is as follows:
# KbDesk div # kb_binput_method {
Float: right;
Width: 102px;
}
# KbDesk div # kb_binput_method {
Background-position:-pixel PX 0px;
}
# KbDesk div # kb_binput_method.kbButtonHover {
Background-position:-pixel PX-38px;
}
# KbDesk div # kb_binput_method.kbButtonDown {
Background-position:-pixel PX-76px;
}
Next, define events for buttons in the JS file. Open virtualkeyboard. js and find
Copy codeThe Code is as follows:
Var C = {
14: 'backspace ',
15: 'tab ',
28: 'enter ',
29: 'caps ',
41: 'shift _ left ',
52: 'shift _ right ',
53: 'del ',
54: 'ctrl _ left ',
55: 'alt _ left ',
56: 'space ',
57: 'alt _ right ',
58: 'ctrl _ right'
};
Add 59: 'input _ method' below. Remember to add a comma after 'ctrl _ right. After modification:
Copy codeThe Code is as follows:
Var C = {
14: 'backspace ',
15: 'tab ',
28: 'enter ',
29: 'caps ',
41: 'shift _ left ',
52: 'shift _ right ',
53: 'del ',
54: 'ctrl _ left ',
55: 'alt _ left ',
56: 'space ',
57: 'alt _ right ',
58: 'ctrl _ right ',
59: 'input _ Method'
};
Find the button and click the response code:
Copy codeThe Code is as follows:
Var d = function (I ){
Var e = DOM. getParent (I. srcElement | I .tar get, 'A ');
If (! E | e. parentNode. id. indexOf (Q) <0) return;
E = e. parentNode;
Var iI = X;
Var il = e. id. substring (Q. length );
Switch (il ){
Case "caps ":
II = iI ^ s;
Break;
Case "shift_left ":
Case "shift_right ":
If (I. shiftKey) break;
II = iI ^ Z;
Break;
Case "alt_left ":
Case "alt_right ":
Case "ctrl_left ":
Case "ctrl_right ":
II = iI ^ (I. altKey <1 ^ w) ^ (I. ctrlKey <2 ^ W );
Break;
Default:
If (_) DOM. CSS (e). addClass (y. buttonDown );
Break
}
If (X! = II ){
B (iI );
B ();
}
I. preventDefault ();
I. stopPropagation ();
};
To:
Copy codeThe Code is as follows:
Var d = function (I ){
Var e = DOM. getParent (I. srcElement | I .tar get, 'A ');
If (! E | e. parentNode. id. indexOf (Q) <0) return;
E = e. parentNode;
Var iI = X;
Var il = e. id. substring (Q. length );
Switch (il ){
Case "caps ":
II = iI ^ s;
Break;
Case "input_method ":
If (document. getElementById ("kb_langselector"). value = 'us '){
VirtualKeyboard. switchLayout ("CN Chinese Simpl. Pinyin ");
}
Else {
VirtualKeyboard. switchLayout ("US ");
}
Break;
Case "shift_left ":
Case "shift_right ":
If (I. shiftKey) break;
II = iI ^ Z;
Break;
Case "alt_left ":
Case "alt_right ":
Case "ctrl_left ":
Case "ctrl_right ":
II = iI ^ (I. altKey <1 ^ w) ^ (I. ctrlKey <2 ^ W );
Break;
Default:
If (_) DOM. CSS (e). addClass (y. buttonDown );
Break
}
If (X! = II ){
B (iI );
B ();
}
I. preventDefault ();
I. stopPropagation ();
};
Now that you have a button, you do not need to display the following drop-down box. Therefore, hide it!
OK, all done! Check
The appearance and functions have been completed, but it takes more than 7 MB to check its folders, Which is simplified! The streamlining process will not be written. After the streamlining is completed:
After writing so much, thank you for reading it, and finally put all the modifications to the simplified source code!
Http://www.bkjia.com/jiaoben/228716.html
Call up the virtual keyboard. The shortcut key is ctrl + shift + k. Check if this is what you need ......
Moderator, how can I switch the VirtualKeyboard virtual/real keyboard, and delete it after completion?
Reply #5 dydydydyyd's post: This is a friend's battalion chief. Do you have to work with your skin? The problem is that switch by that. Thank you.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
