Multifunctional soft keyboard plug-in based on jquery

Multifunctional soft keyboard plug-in based on jquery_jquery

WBOY

Release： 2016-05-16 17:51:39

Original

1559 people have browsed it

It supports query function keyboard and simple soft keyboard. The keyboard style is completely defined in a separate css file and can be beautified by yourself.

(Supports soft keyboard from query)

(simple software disk)

Default parameters of the plug-in

Copy code The code is as follows:

 
jquery.fn.softkeyboard.defaults = { 
names: { 
_delbtn: "skbdel", 
_clearbtn: "skbclear", 
_querybtn : "skbquery", 
_closebtn: "skbclose", 
_letterbtn: "skbbtn", 
_maindiv: "skbsoftkeyboard", 
_leftdiv: "skbleft", 
_rightdiv: "skbright", 
_keyboarddiv: "skbkeyboard", 
_operationdiv: "skboperation", 
_codetxt: "skbcode", 
_resultsselect: "skbresults", 
_postparamcode: "sfbcode", 
_clearbtnviewname: "clear", 
_delbtnviewname: "delete", 
_querybtnviewname: "query", 
_closebtnviewname: "close" 
}, //Plug-in related element naming 
listmultiple: true, / /Select whether to expand 
simplekeyboard: true, //Whether to display uppercase letters
onlykeyboard: false, //Whether to have query function
maxlength: null, //The maximum length that can be input
requestdataurl: null , //Query the post address of the data
oncompleted: function (data) { }, //This event will be triggered when completed
onkeydown: function (data) { } //This event will be triggered when the key is pressed
}; 

How to use the plug-in
How to use

Copy the code The code is as follows:

Add a text box to the page using method 2

Use a plug-in for the text box with class querytxt

Copy code The code is as follows:

Change related parameters

Copy code The code is as follows:

 
$(".querytxt").softkeyboard({ 
simplekeyboard: true, 
listmultiple: true, 
maxlength: 10, 
onkeydown: function (d) { alert(d) }, 
requestdataurl: "GetData.ashx", 
onlykeyboard: true 
}) 

The json data returned by GetData.ashx The format is similar to the following

Copy the code The code is as follows:

[{code:"DL",name :"Dalian"},{code:"DT",name:"Datong"},{code:"DL",name:"Dali"}]