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