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:
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:
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 "
- python - you may need to restart the kernel to use updated packages error
- php - coincheck api authentication doesn't work
- php - i would like to introduce the coincheck api so that i can make payments with bitcoin on my ec site
- [php] i want to get account information using coincheck api
- the emulator process for avd pixel_2_api_29 was killed occurred when the android studio emulator was started, so i would like to
- i want to call a child component method from a parent in vuejs
- python 3x - typeerror: 'method' object is not subscriptable
- dart - flutter: the instance member'stars' can't be accessed in an initializer error
- xcode - pod install [!] no `podfile 'found in the project directory