Create a personalized, powerful jquery virtual keyboard (VirtualKeyboard)

Create a personalized, powerful jquery virtual keyboard (VirtualKeyboard) _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Tags response code

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Recently done projects, I am responsible for making Web front-end, customers need to use touch screen to operate, but the mouse keyboard, but required to be able to input text, including digital, English, Chinese. Thought for a moment, decided to use JS to implement the virtual keyboard.

First the internet search a bit JS virtual keyboard, after careful screening, phase of the VirtualKeyboard, a powerful JS virtual keyboard plug-ins.

First a brief introduction of VirtualKeyboard, it built more than 100 kinds of keyboard layout and more than 200 kinds of input method, 9 sets of optional skin scheme, but also support the input method, the function is quite powerful.

First attach the download address, the latest version of the current 3.94:http://www.corallosoftware.it/download/download.html This tutorial uses is 3.71 does not provide the download separately, has the need friend to be possible to download me to revise completes, in the article last

Download the first view of its demo document, turn on jsvk\jscripts\demo_inline.html, see the virtual keyboard is still pretty beautiful, and support Chinese pinyin input, fully in line with the expectations. As shown in the following illustration:

Integrate into the project, say dry!

First copy the files in the Jsvk\jscripts directory to the project, and the text files and HTML demo files can be deleted.

A JS file is referenced in the project page:

Copy Code code as follows:

Explanation: Vk_layout=cn%20chinese%20simpl.%20pinyin indicates that the default input method is set to Simplified Chinese.

Vk_skin=flat_gray indicates that the default skin selection is Flat_gray. These two can be set according to individual needs.

Call/Hide function for virtual keyboard:

Virtualkeyboard.toggle ("Txt_search", "softkey");
Txt_search is the id,softkey of the text box is the ID of the virtual keyboard display location element.

Here's a simple example:

Copy Code code as follows:

Effect:

Customize the functionality you need step-by-step

Basic skills can be achieved, the next is the Chinese and English switching. First click CapsLock Switch to uppercase try, the result is disappointed, the Chinese state switch to uppercase input is still Chinese. Can only click on the lower right corner of the Input Method selection menu, find us, switch to English input method. This can not be, each time in hundreds of options to switch back and forth, the user experience how bad Ah!

So, I have a preliminary idea, empty the Drop-down list, and manually build a list of only Chinese and English options. To empty the Drop-down list, first of all to know its ID, this layer is generally dynamically created, so find jsvk\jscripts\virtualkeyboard.js, open a look, as expected, the code is compressed after, can directly read is the man of God. So you need to unpack it first. Open http://jsbeautifier.org/, the JS file in the code copied to the Input box, click the button, decompression completed. Ctrl+a,ctrl+c copy to the new JS file, OK, you can read it. Search "<select" keyword, suddenly found, the code is as follows:

"<select id=\" kb_langselector\ "></select>" + "<select id=\" kb_mappingselector\ "></select>"
Kb_mappingselector is the keyboard layout selection box Id,kb_langselector is the Input method selection box Id,kb_langselector is the ID we want.

With the ID, it can be modified, because it is created dynamically, only when the creation is complete can I get its ID, so I write the code to the virtual keyboard after loading.

The following code uses the jquery framework, which requires a reference to jquery before it can be used properly.

Copy Code code as follows:

function Test () {
$ ("#kb_langselector"). Empty () Append ("<option value= ' US us ' > English </option><option value= ' CN Chinese Simpl. Pinyin ' > Chinese </option> '). Change (function () {
Virtualkeyboard.switchlayout (This.value); return false;
});
}

Test found the problem, loading stopped at 10%, the page prompts JS error.

Through the description of the error probably guessed that I built the option there is a problem, but the specific problem where I have been tracking debugging has not been found, if any of the heroes to find mistakes also hope to enlighten!

Encountered errors for a long time to attack, change the idea of it!

The initial idea failed, so I changed my mind, since I built a problem, well, I do not build, you build yourself, but unnecessary I do not need.

According to this idea, I re-examine the load code, found that the input method loaded JS is defined in the jsvk\jscripts\layouts\layouts.js. So decisively remove unnecessary options, leaving only Chinese simpl. Pinyin and us two options. After the change of the effect figure is as follows, only Chinese and English two options, more refreshing.

That's not what I want!

In English and Chinese switch implementation, but not easy to operate, I need is a key switch, why not add a toggle key in the keyboard?

First find the skin file, \jsvk\jscripts\css\flat_gray\button_set.png, I want to add a button myself!

Original:

After modification:

Only change the picture is not enough, button positioning in the style table, continue to modify the style sheet! Add the following code at the end of the style sheet \jsvk\jscripts\css\flat_gray\keyboard.css.

Copy Code code as follows:

#kbDesk Div#kb_binput_method {
Float:right;
width:102px;
}
#kbDesk Div#kb_binput_method a {
Background-position: -453px 0px;
}
#kbDesk Div#kb_binput_method.kbbuttonhover a {
Background-position: -453px-38px;
}
#kbDesk Div#kb_binput_method.kbbuttondown a {
Background-position: -453px-76px;
}

Next you want to define the event in the JS file for the button. Open Virtualkeyboard.js and find

Copy Code code as follows:

var C = {
: ' Backspace ',
: ' tab ',
: ' Enter ',
: ' Caps ',
' Shift_left ',
"Shift_right",
' Del ',
I: ' Ctrl_left ',
' Alt_left ',
A: ' Space ',
' Alt_right ',
: ' Ctrl_right '
};

Add the following: ' Input_method ', remember to add a comma after ' ctrl_right '. After modification:

Copy code code as follows:

var C = {
: ' Backspace ',
: ' tab ',
: ' Enter ',
: ' Caps ',
' Shift_left ',
"Shift_right",
' Del ',
I: ' Ctrl_left ',
' Alt_left ',
A: ' Space ',
' Alt_right ',
' Ctrl_right ',
: ' Input_method '
};

Continue to find the button click Response Code:

Copy Code code as follows:

Modified to:

Copy Code code as follows:

var d = function (i) {
var e = dom.getparent (i.srcelement | | i.target, ' 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 us ') {
Virtualkeyboard.switchlayout ("CN Chinese Simpl.") Pinyin ");

}
else {
Virtualkeyboard.switchlayout ("US 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 don't need to display the dropdown box below, so hide it!

OK, that's it! Look at the effect chart

Look and function buttoned up, but a look at its folder, a full 7M more, streamlined! The streamlining process is not written, after the completion of the streamlining:

Write so much, thank you can read it, finally put on all the changes after the completion of the source code!

Http://www.jb51.net/jiaoben/228716.html

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More