JS Numeric keypad

JS Numeric keypad, JS keypad

CSS code:

#numberkeyboard{Border:1px solid #b3b3b3;background:#f2f3f7;Height:285px;margin:0;padding:2px;position:relative;Visibility:Visible!important;width:285px;}#numberkeyboard. Numbtn{-moz-border-radius:4px;/*Gecko Browsers*/-webkit-border-radius:4px;/*Webkit Browsers*/Border-radius:4px;/*Syntax Round corner*/float: Left;Height:68px;width:68px;Border:Solid 1px #b3b3b3;Margin-top:1px;Margin-left:1px;font-family:Verdana, Microsoft Ya-hei, ya-hei;font-size:22px;Line-height:69px;text-align:Center;cursor:default;Background-image:URL (numbtn.png);background-position:-1px-1px; }#numberkeyboard. Numbtn:hover{background-position:-1px-72px; }. Numbtndown{background-position:-1px-143px!important;}

View Code

JS Code:

//Small KeyboardfunctionLoadnumberkeyboard (obj) {if($ ("#numberkeyboard"). Length = = 0) {        varnumbtnhtml = ' <div class= "numbtn" key= "1" >1</div><div class= "numbtn" key= "2" >2</div><div class= "Numbtn" key= "3" >3</div><div class= "numbtn" key= "backspace" >←</div><div class= " Numbtn "key=" 4 ">4</div><div class=" numbtn "key=" 5 ">5</div><div class=" numbtn "key=" 6 ">6 </div><div class= "numbtn" key= "clear" > Empty </div><div class= "numbtn" key= "7" >7</div> <div class= "numbtn" key= "8" >8</div><div class= "numbtn" key= "9" >9</div><div class= "numbtn "Key=" "style=" Visibility:hidden; ></div><div class= "numbtn" key= "sign" >+/-</div><div class= "numbtn" key= "0" >0</div ><div class= "numbtn" key= "." >.</div><div class= "numbtn" key= "Close" > Close </div> '; $("Body"). Append (' <div style= ' position:absolute; left:0; top:0; display:none; " ><div id= "Numberkeyboard" > ' + numbtnhtml + ' </div></div> '); $("#numberkeyboard"). Find (". Numbtn"). Bind ("MouseDown",function () {            $( This). addclass ("Numbtndown");        }); $("#numberkeyboard"). Find (". Numbtn"). Bind ("MouseUp",function () {            $( This). Removeclass ("Numbtndown");    }); }    varContainerdiv = $ ("#numberkeyboard"). parent ();    Containerdiv.show (); Containerdiv.css ("Z-index", 9100); Obj=$ (obj); if(Obj.attr ("id")) {        varobjpadding = parseint (Obj.css ("Padding-top"). Replace ("px", "")) + parseint (obj.css ("Padding-bottom"). Replace ("px", " ")); if(Obj.offset (). Left + 340 >=$ (window). Width ()) {Containerdiv.css ("Left", $ (window). Width ()-340); }        Else{containerdiv.css ("Left", Obj.offset (). left); }        if(Obj.offset (). Top + 291 + obj.height () + objpadding + 2 + 5 >= $ (window). Height () +$ (window). scrolltop ()) {Containerdiv.css ("Top", Obj.offset (). top-291-5); }        Else{containerdiv.css ("Top", Obj.offset (). Top + obj.height () + objpadding + 2 + 5); }    }    $("#numberkeyboard"). Find (". Numbtn"). Unbind ("click"); $("#numberkeyboard"). Find (". Numbtn"). Bind ("click",function() {obj.focus (); varKey = $ ( This). attr ("Key"); Switch(key) { Case"Backspace":                if(Obj.val (). length > 0) {Obj.val (Obj.val (). substr (0, Obj.val (). length-1)); }                 Break;  Case"Clear": Obj.val ("");  Break;  Case"Sign":                if(Obj.val (). length > 0) {                    if(Obj.val (). substr (0, 1) = = "-") {Obj.val (Obj.val (). substr (1, Obj.val (). length-1)); }                    Else{obj.val ("-" +obj.val ()); }                }                 Break;  Case"Close":                $("#numberkeyboard"). Find (". Numbtn"). Unbind ("click");                Containerdiv.hide ();  Break; default: Obj.val (Obj.val ()+key);  Break; }    });}

View Code

Style picture (Numbtn.png):

How to use:

1, reference CSS and JS:

<Linktype= "Text/css"href= "~/scripts/numkey/numkey.css"rel= "stylesheet" /><Scripttype= "Text/javascript"src= "~/scripts/jquery-1.8.2.js"></Script><Scripttype= "Text/javascript"src= "~/scripts/numkey/numkey.js"></Script>

View Code

2. Initialize:

$ (function  () {    $ ("input[type= ' text ']"). Click (function  () {        Loadnumberkeyboard (this);    } );

View Code

3.:

JS Numeric keypad