jquery-based numeric keypad plug-in

Sometimes, we need to use a soft keyboard on a webpage. Today, we bring you a jquery-based numeric keypad plugin that does not rely on any file resources, except jquery. The pure numeric keyboard, has the backspace, has clears, does not support the input decimal (needs can change one by oneself, mainly is many decimal places to have 13 keys, is not good arranges, hehe). Support mouse drag and touch drag, can be closed.

Online Demo

1. Page code

<ul> <li><input type= "text" placeholder= "mobile number after four" id= "Numkeyboard1" class= "Numkeyboard"/></li > <li><input type= "text"  placeholder= "Open box password"  id= "Numkeyboard2"  class= "Numkeyboard"/> </li> <button type= "Submit"   class= "Numkeyboard" value= "Querun" > Accurate &nbsp;&nbsp; </button >        </ul>

Very simple, let's look at the call

$ (". Numkeyboard"). Numkeyboard ({    keyboardradix:1000,//keyboard size cardinality    mainbackground: ' #C8BFE7 ',//main background color    Menubackground: ' #4A81B0 ',//head background color    exitbackground: ' #4376A0 ',//Close button background color    buttonbackground: ' #ff730e ',//keyboard background color    clickeve:true//whether to bind element click event});

　　

Effect:

　　　

Parameter description: Keyboardradix: Set the keyboard size, default 1000. When the value is 1000, the actual size is 600x500. Keyboardradix Minimum is 300;clickeve: sets whether the Click event of the binding element, or True, binds the click event, which can also be achieved when the click is clicked Onfocus. The default is to bind only the element's onfocus event.

In order to use simple, so the CSS style control purely by JS, beautiful on can not be forced. If you want to be beautiful, it is recommended to use CSS control style, JS operation style too much pain. This is I have seen before a pure CSS3 keyboard, we can see, very beautiful, there is a need to refer to. Source Code View

2.js Code

/* * Numkeyboard 1.0 * Copyright (c) Bowenluo http://www.luobo.com/* date:2014-06-08* example:$ (". Numkeyboard"). Numkeyboard (); */(function ($) {$.fn.numkeyboard = function (options) {var defaults = {keyboardradix:1000,//keyboard size radix m Ainbackground: ' #C8BFE7 ',//main background color menubackground: ' #4A81B0 ',//head background color exitbackground: ' #4376A0 ',//Close button background color buttonbackgr Ound: ' #ff730e ',//keyboard button background color clickeve:false//whether to bind element click event} var options = $.extend (defaults, options); var Keyboardradix = options.keyboardradix;if (keyboardradix<300) {keyboardradix=300;}    var numkeyboardcount = 0;var Activeinputele;this.each (function () {numkeyboardcount++;    Add a unique numeric keypad if (numkeyboardcount<2) {keyboardid = Randomonlyid (); $ ("Body"). Append ("<div id=" "+keyboardid+" ' class= ' Auth_keybord ' > "+" <div id= ' auth_keybord_exit ' class= '    Auth_keybord_exit ' > Close </div> ' + ' <div id= ' auth_keybord_menu ' class= ' auth_keybord_menu ' ></div> ' + "<ul class= ' number_list ' id=' Number_list ' > ' + ' <li><button type= ' button ' >7</button></li> ' + ' <li><button Type= ' button ' >8</button></li> ' + ' <li><button type= ' button ' >9</button></li > "+" <li><button type= ' button ' >4</button></li> ' + ' <li><button type= ' button ' >5</button></li> "+" <li><button type= ' button ' >6</button></li> "+" <li ><button type= ' button ' >1</button></li> ' + ' <li><button type= ' button ' >2</button ></li> "+" <li><button type= ' button ' >3</button></li> "+" <li><button type= ' button ' >0</button></li> ' + ' <li><button type= ' submit ' > Clear < /button></li> "+" <li><button type= ' submit ' > Backspace </button></li> ' + ' </ul></        Div> "); }//Element selector var Inputele = $ (this);   var keyboard = $ ("#" +keyboardid+ "");    var keyboard_exit = Keyboard.children (' Div:first ');    var keyboard_menu = Keyboard.children (' Div:eq (1) ');    var Keyboard_buttonul = keyboard.find (' Ul:first ');    var Keyboard_buttonli = keyboard_buttonul.children (' li ');    var Keyboard_button = keyboard_buttonli.children (' button '); Element CSS style control keyboard.css ({"position": "Absolute", "Z-index": "Ten", "Display": "None", "Background": O Ptions.mainbackground,overflow: "Hidden", "width": keyboardradix*0.6, "height": keyboardradix*0.5, "Border-radius": K    eyboardradix*0.01}); Keyboard_exit.css ({"position": "Absolute", "Z-index": "1", "right": "0", "background": Options.exitbackground, "cursor ":" Pointer "," Text-align ":" Center "," width ": keyboardradix*0.16," height ": keyboardradix*0.081," Border-top-right-ra Dius ": keyboardradix*0.01," line-height ": keyboardradix*0.081+" px "," font-family ":" ' Microsoft Jas Black ', Arial "," Font-size ": Keybo ardradix*0.036+ "px", "Corlor": "#000", "letter-spacing": keyboardradix*0.005}); Keyboard_menu.css ({position: "relative", Background:options.menubackground,cursor: "Move", margin: "Auto", Width: keyboardradix*0.6,height:keyboardradix*0.081, "Border-top-left-radius": keyboardradix*0.01, "    Border-top-right-radius ": keyboardradix*0.01}); Keyboard_buttonul.css ({position: "relative", Margin: "Auto", "Margin-top": keyboardradix*0.03+ "px", Width:    keyboardradix*0.54,height:keyboardradix*0.37}); Keyboard_buttonli.css ({position: "relative", Margin: "Auto", Overflow: "Hidden", "float": "Left", width:keyboardradix*    0.18,height:keyboardradix*0.09});    var ButtonBorder = String (keyboardradix*0.001+ "px solid" +options.buttonbackground); Keyboard_button.css ({"Position": "relative", "float": "Left", padding: "0", "cursor": "pointer", "background": O Ptions.buttonbackground, "text-align": "Center", "width": keyboardradix*0.16, "height": keyboardradix*0.08, "border-r Adius ": Keyboardradix*0.004,border:buttonborder," line-height ": keyboardradix*0.08+" px ", margin:" 0 0 0 "+keyboardr Adix*0.01+ "px", "font-family": "' Microsoft Jas Black ', Arial", "Font-size": keyboardradix*0.032+ "px", "Color": "#fff"});        Keyboard_button.mousedown (function (event) {$ (this). CSS ({background: "#666", Top: "2px"});    Event.preventdefault ();    }). MouseUp (function () {$ (this). CSS ({background:options.buttonbackground,top: "0"});    });    Keyboard_exit.click (function () {exit (Options.clickeve);        });        Inputele.focus (function (event) {Activeinputele = $ (this);        var p = getscreenposition (this); if (Keyboard.css ("display") = = "None") {Keyboard.css ({"Display": "Block", "left":p. x, "Top":p. y+$ (This). Height () *1.2}            );            Mousedrag ();        Touchdrag ();            }});        if (Options.clickeve) {Inputele.click (function () {Activeinputele = $ (this);        var p = getscreenposition (this); if (Keyboard.css ("display") = = "None") {Keyboard.css ({"Display": "Block", "left":p. x, "Top":p. y+$ (This). Height () *1.2}            ); MOUsEdrag ();        Touchdrag ();    }});        } if (numkeyboardcount<2) {for (Var i=0;i<keyboard_button.length;i++) {Numbuttonclick (i);        }} function Randomonlyid () {var temprandom = String (Date.now ());        var temprandomlength = temprandom.length;        Temprandom = temprandom.substring (temprandomlength-5,temprandomlength-1);        var randomid = "Auth_keybord" +temprandom;        if ($ ("#randomId"). length>0) {Randomonlyid ()}else{return randomid;    }} function Getelem (ID) {return document.getElementById (ID); } function Numbuttonclick (buttonnum) {Keyboard_buttonli.children (' Button:eq (' +buttonnum+ ') '). Click (Function (                            e) {var buttontext = Keyboard_buttonli.children (' Button:eq (' +buttonnum+ ') '). text ();            if (BUTTONTEXT/1) {Clickkey (BUTTONTEXT/1); }else{if (buttontext== "0"){clickkey (0);                } if (buttontext== "backspace") {backspace ();                } if (buttontext== "clear") {keyclear ();    }}})} function Keyclear () {Activeinputele.val ("");        } function Backspace () {var inputtext = Activeinputele.val ();            if (inputtext.length>0) {inputtext = inputtext.substring (0,inputtext.length-1);        Activeinputele.val (Inputtext);        }} function Clickkey (num) {var inputtext = Activeinputele.val ();                 Inputtext = Inputtext+num;    Activeinputele.val (Inputtext);    } function exit () {Keyboard.css ({"Display": "None"});                    } function Getscreenposition (object) {var position = {};        position.x = Object.offsetleft;        POSITION.Y = Object.offsettop;    while (object.offsetparent) {        position.x = position.x + object.offsetParent.offsetLeft;            POSITION.Y = Position.y + object.offsetParent.offsetTop;            if (object = = document.getElementsByTagName ("body") [0]) {break;            } else{object = Object.offsetparent;    }} return position;        } function Mousedrag () {var moveele = keyboard;        var eventele = Keyboard_menu;        var STX = ETX = CurX = sty = ety = CurY = 0;        var maction = false;        var eleleft = +moveele.css ("left"). Split (' px ') [0];        var eletop = +moveele.css ("Top"). Split (' px ') [0];            Eventele.mousedown (function (event) {maction = true;                STX = Event.pagex;            Sty = Event.pagey;            Eleleft = +moveele.css ("left"). Split (' px ') [0];            Eletop = +moveele.css ("Top"). Split (' px ') [0];        Event.preventdefault ();      }). MouseMove (function (event) {if (maction) {      var CurX = Event.pagex-stx;                            var CurY = event.pagey-sty;            Moveele.css ({"Left": Eleleft+curx, "Top": Eletop+cury});        Event.preventdefault ();        }});            $ ("Body"). MouseUp (function (event) {STX = ETX = CurX = sty = ety = CurY = 0;                        Maction = false;    });        } function Touchdrag () {var moveele = keyboard;        var eventele = Keyboard_menu;        var STX = Sty = ETX = ety = CurX = CurY = 0;        var taction = false;        var eleleft = +moveele.css ("left"). Split (' px ') [0];                var eletop = +moveele.css ("Top"). Split (' px ') [0];            Eventele.on ("Touchstart", function (event) {//touchstart var event = event.originalevent;            Taction = true;            CurX = CurY = 0;            Element current Position Eleleft = +moveele.css ("left"). Split (' px ') [0];            Eletop = +moveele.css ("Top"). Split (' px ') [0]; Finger position STX = Event.toucheS[0].pagex;        Sty = Event.touches[0].pagey;        });            Eventele.on ("Touchmove", function (event) {if (taction) {var event = event.originalevent;            Event.preventdefault ();            CurX = EVENT.TOUCHES[0].PAGEX-STX;            CurY = Event.touches[0].pagey-sty;            Alert (eleleft+ "-" +gundongx);            Moveele.css ({"Left": Eleleft+curx, "Top": Eletop+cury});        }                    });            Eventele.on ("Touchend", function (event) {STX = ETX = CurX = sty = ety = CurY = 0;                     Maction = false;        });            function Gett3d (Elem, ename) {var elem = elem[0];            var str1 = Elem.style.webkitTransform;            if (str1 = = "") return "0";            STR1 = Str1.replace ("Translate3d (", "");            STR1 = Str1.replace (")", "" ");            var Carr = Str1.split (",");            if (ename = = "x") return carr[0];       else if (ename = = "Y") return carr[1];     else if (ename = = "Z") return carr[2];        else return ""; }    }}); }; }) (JQuery);

　　

Citation: http://www.cnblogs.com/crookie/p/3782256.html