Home>

This article mainly talks about how to create a personalized virtualkeyboard step by step together:the powerful jquery virtual keyboard,Very detailed,Very practical

Recently working on a project,I am responsible for the front end of the webpage,Customers need to use touch screen for operation,No external mouse and keyboard,But require the ability to enter text,Including numbers,English Chinese. After thinking about it,Decided to implement virtual keyboard with js.

First searched the Internet for a js virtual keyboard.After careful screening,Liked virtualkeyboard, a powerful js virtual keyboard plugin.

Let's briefly introduce the virtualkeyboard. It has more than 100 keyboard layouts and more than 200 input methods.9 sets of optional skin solutions,And support self-built input method,Very powerful.

First attach the download address,Current latest version 3.94:This tutorial uses 3.71 and is not available for download separately.A friend in need can download what I modified,at the end of the article

Download it first to view its demo file,Open jsvk \ jscripts \ demo_inline.html one by one and see that the virtual keyboard is still pretty beautiful.And supports Chinese pinyin input,Exactly as expected.As shown below:

Integrated into the project,Just do it!

First copy the files in the jsvk \ jscripts directory to the project,Text files and html presentation files can be deleted.

Quote The js file is referenced in the project page:

<script type="text/javascript" src="jscripts/vk_loader.js?vk_layout=cn%20chinese%20simpl.%20pinyin&vk_skin=flat_gray"></script

To explain:vk_layout=cn%20chinese%20simpl.%20pinyin means that the default input method is set to Simplified Chinese,

vk_skin=flat_gray indicates that the default skin uses flat_gray. These two can be set according to personal needs.

Call/hide the function of the virtual keyboard:

virtualkeyboard.toggle ("txt_search", "softkey");

Txt_search is the id of the text box, and softkey is the id of the virtual keyboard display position element.

Here is a simple example:

<html>
 <head>
 <Script type="text/javascript" src="vk_loader.js?vk_layout=cn%20chinese%20simpl.%20pinyin&vk_skin=flat_gray"></script>
 </head>
 <body>
 <input type="text" onfocus="virtualkeyboard.toggle (" txt_search "," softkey ")" onblur="virtualkeyboard.toggle (" txt_search "," softkey ");" />
 <div></div>
 </body>
</html>

Effect:

Customize the features you need step by step

Basic functions are implemented,The next step is to switch between Chinese and English.First click capslock to switch to uppercase.Disappointed,In the Chinese state, switching to uppercase input is still Chinese.You can only click the input method selection menu in the lower right corner.Find us and switch to English input method.This doesn't work,Switch back and forth between hundreds of options every time,How bad the user experience is!

So, I have a preliminary idea,Clear the drop-down list,Manually build a list with only Chinese and English options.To clear the drop-down list,First of all, you need to know its id. Such layers are generally created dynamically.So find jsvk \ jscripts \ virtualkeyboard.js, open it,Unsurprisingly,The code is compressed.Those who can read directly are god-man.So first uncompress it.Open it, copy the code in the js file into the input box,Click the button,Extraction is complete.ctrl + a, ctrl + c are copied to the new js file, ok, ready to read.Search for the "

"<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 created dynamically,I can get its id only after the creation is complete, so I wrote the code after the virtual keyboard was loaded.

The following code uses the jquery framework, you need to reference jquery before it can be used normally.

function test () {
$("#kb_langselector"). empty (). append ("<option value =" us us ">English</option><option value =" cn chinese simpl. pinyin ">option>"). change (function () {
virtualkeyboard.switchlayout (this.value);return false;
});
}

Tested and found the problem,Loading stopped at 10%, the page prompts js error.

I probably guessed that there was a problem with the option I built based on the error description, but I did n’t find the specific problem after several trace debugging.If any hero finds a mistake, I still hope to enlighten me!

It ’s been a long time since I encountered an error.Change your mind!

The initial idea failed,So I changed my mind,Since there is something wrong with my build,Ok, i don't build anymore,You build it yourself,But I don't need extra.

This is not what I want!

Chinese and English switching has been realized,But the operation is not convenient enough,What I need is a one-click switch,Why not add a toggle key to your keyboard?

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

Original image:

After modification:

change Changing the picture is definitely not enough,The buttons are positioned in the style sheet,Continue to modify the style sheet! Add the following code at the end of the style sheet \ jsvk \ jscripts \ css \ flat_gray \ keyboard.css.

#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 need to define the event for the button in the js file.Open virtualkeyboard.js and find

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"
 };

Plus Add 59:"input_method" below, remember to add a comma after "ctrl_right".After modification:

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"
 };

Continue to find the button click response code:

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 "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 ();
 };

change into:

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");
</p>
<p>
}
 else {
 virtualkeyboard.switchlayout ("us us");
</p>
<p>
}
 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 there are buttons,There is no need to display the drop-down box below,So, hide it!

Ok, you're done! Look at the effect map

The appearance and function are done.But looking at its folders,More than 7m, streamlined! I will not write down the streamlining process,After streamlining:

  • Previous Shuffle instance of PHP's shuffle array function in JavaScript
  • Next Example of the function of PHP @ at mark