有时，我们需要在网页上使用软键盘。今天，就给大家带来一个基于jQuery的数字键盘插件，除了jQuery，不需要依赖任何文件资源。纯数字键盘，有退格，有清除，不支持输入小数(需要的可以自己改一下，主要是多个小数点就有13个键，不好排列了，呵呵)。支持鼠标拖动和触摸拖动，可关闭。
1.页面代码
很简单吧，下面看看调用
$(".numkeyboard").numkeyboard({ keyboardRadix:1000,//键盘大小基数 mainbackground:'#C8BFE7', //主背景色 menubackground:'#4A81B0', //头背景色 exitbackground:'#4376A0', //关闭按钮背景色 buttonbackground:'#ff730e', //键盘背景色 clickeve:true//是否绑定元素click事件}); 效果截图：
参数说明：keyboardRadix：设置键盘大小，默认1000。当值为1000时，实际大小为600X500。keyboardRadix最小为300；clickeve：设置是否绑定元素的click事件，如果为true，则绑定click事件，即单击click时也可以达到onfocus的效果。默认只绑定元素的onfocus事件。
为了使用简单，所以css样式控制纯由js完成，美观上就不能强求了。如果要想漂亮，建议用css控制样式，js操作样式太蛋疼了。这是我以前看到过的一个，大家可以看看，很漂亮的，有需要的可以参照一下。
2.js代码
1 /* 2 * numkeyboard 1.0 3 * Copyright (c) 2014 BowenLuo http://www.luobo.com/ 4 * Date: 2014-06-08 5 * Example:$(".numkeyboard").numkeyboard(); 6 */ 7 (function($){ 8 $.fn.numkeyboard = function(options){ 9 var defaults = { 10 keyboardRadix:1000,//键盘大小基数 11 mainbackground:'#C8BFE7', //主背景色 12 menubackground:'#4A81B0', //头背景色 13 exitbackground:'#4376A0', //关闭按钮背景色 14 buttonbackground:'#ff730e', //键盘按钮背景色 15 clickeve:false//是否绑定元素click事件 16 } 17 var options = $.extend(defaults, options); 18 var keyboardRadix = options.keyboardRadix; 19 if(keyboardRadix<300){ 20 keyboardRadix=300; 21 } 22 var numkeyboardcount = 0; 23 var activeinputele; 24 this.each(function(){ 25 numkeyboardcount++; 26 //添加唯一的数字键盘 27 if(numkeyboardcount<2){ 28 keyBoardId = randomOnlyId(); 29 $("body").append(" " 30 +" 关闭 " 31 +" " 32 +" " 33 +" " 34 +" " 35 +" " 36 +" " 37 +" " 38 +" " 39 +" " 40 +" " 41 +" " 42 +" " 43 +" " 44 +" " 45 +"
"); 46 } 47 //元素选择器 48 var inputele = $(this); 49 var keyboard = $("#"+keyBoardId+""); 50 var keyboard_exit = keyboard.children('div:first'); 51 var keyboard_menu = keyboard.children('div:eq(1)'); 52 var keyboard_buttonul = keyboard.find('ul:first'); 53 var keyboard_buttonli = keyboard_buttonul.children('li'); 54 var keyboard_button = keyboard_buttonli.children('button'); 55 //元素css样式控制 56 keyboard.css({"position":"absolute","z-index":"10","display":"none","background":options.mainbackground,overflow:"hidden", 57 "width":keyboardRadix*0.6,"height":keyboardRadix*0.5,"border-radius":keyboardRadix*0.01}); 58 keyboard_exit.css({"position":"absolute","z-index":"1","right":"0","background":options.exitbackground,"cursor":"pointer","text-align":"center", 59 "width":keyboardRadix*0.16,"height":keyboardRadix*0.081,"border-top-right-radius":keyboardRadix*0.01,"line-height":keyboardRadix*0.081+"px", 60 "font-family":"'微软雅黑',arial","font-size":keyboardRadix*0.036+"px","corlor":"#000","letter-spacing":keyboardRadix*0.005}); 61 keyboard_menu.css({position:"relative",background:options.menubackground,cursor:"move",margin:"auto", 62 width:keyboardRadix*0.6,height:keyboardRadix*0.081,"border-top-left-radius":keyboardRadix*0.01,"border-top-right-radius":keyboardRadix*0.01}); 63 keyboard_buttonul.css({position:"relative",margin:"auto","margin-top":keyboardRadix*0.03+"px",width:keyboardRadix*0.54,height:keyboardRadix*0.37}); 64 keyboard_buttonli.css({position:"relative",margin:"auto",overflow:"hidden","float":"left",width:keyboardRadix*0.18,height:keyboardRadix*0.09}); 65 var buttonborder = String(keyboardRadix*0.001+"px solid "+options.buttonbackground); 66 keyboard_button.css({"position":"relative","float":"left", padding: "0","cursor":"pointer","background":options.buttonbackground,"text-align":"center", 67 "width":keyboardRadix*0.16,"height":keyboardRadix*0.08,"border-radius":keyboardRadix*0.004,border:buttonborder, 68 "line-height":keyboardRadix*0.08+"px",margin:"0 0 0 "+keyboardRadix*0.01+"px", 69 "font-family":"'微软雅黑',arial","font-size":keyboardRadix*0.032+"px","color":"#fff"}); 70 keyboard_button.mousedown(function(event){ 71 $(this).css({background:"#666",top:"2px"}); 72 event.preventDefault(); 73 }).mouseup(function(){ 74 $(this).css({background:options.buttonbackground,top:"0"}); 75 }); 76 77 keyboard_exit.click(function(){ 78 exit(options.clickeve); 79 }); 80 inputele.focus(function(event){ 81 activeinputele = $(this); 82 var p = GetScreenPosition(this); 83 if(keyboard.css("display")=="none"){ 84 keyboard.css({"display":"block","left":p.x,"top":p.y+$(this).height()*1.2}); 85 mouseDrag(); 86 touchDrag(); 87 }}); 88 89 if(options.clickeve){ 90 inputele.click(function(){ 91 activeinputele = $(this); 92 var p = GetScreenPosition(this); 93 if(keyboard.css("display")=="none"){ 94 keyboard.css({"display":"block","left":p.x,"top":p.y+$(this).height()*1.2}); 95 mouseDrag(); 96 touchDrag(); 97 }}); 98 } 99 if(numkeyboardcount<2){100 for(var i=0;i 0){110 randomOnlyId()111 }else{112 return randomId;113 }114 }115 116 function getElem(id) {117 return document.getElementById(id);118 }119 120 function numbuttonclick(buttonnum){121 keyboard_buttonli.children('button:eq('+buttonnum+')').click(function(e){122 123 var buttontext = keyboard_buttonli.children('button:eq('+buttonnum+')').text(); 124 if(buttontext/1){125 clickkey(buttontext/1);126 }else{127 if(buttontext=="0"){128 clickkey(0);129 }130 if(buttontext=="退格"){131 backspace();132 }133 if(buttontext=="清除"){134 keyclear();135 }136 } 137 })138 }139 140 function keyclear(){141 activeinputele.val("");142 }143 function backspace(){144 var inputtext = activeinputele.val();145 if(inputtext.length>0){146 inputtext = inputtext.substring(0,inputtext.length-1);147 activeinputele.val(inputtext);148 } 149 } 150 function clickkey(num){151 var inputtext = activeinputele.val();152 inputtext = inputtext+num; 153 activeinputele.val(inputtext);154 } 155 156 function exit(){ 157 keyboard.css({"display":"none"});158 }159 160 function GetScreenPosition(object) {161 var position = {}; 162 position.x = object.offsetLeft;163 position.y = object.offsetTop;164 while (object.offsetParent) {165 position.x = position.x + object.offsetParent.offsetLeft;166 position.y = position.y + object.offsetParent.offsetTop;167 if (object == document.getElementsByTagName("body")[0]) {168 break;169 }170 else{171 object = object.offsetParent;172 }173 }174 return position;175 }176 177 function mouseDrag() {178 var moveEle = keyboard;179 var eventEle = keyboard_menu;180 var stx = etx = curX = sty = ety = curY = 0;181 var MAction = false;182 var eleLeft = +moveEle.css("left").split('px')[0];183 var eleTop = +moveEle.css("top").split('px')[0];184 eventEle.mousedown(function(event){185 MAction = true;186 stx = event.pageX; 187 sty = event.pageY;188 eleLeft = +moveEle.css("left").split('px')[0];189 eleTop = +moveEle.css("top").split('px')[0];190 event.preventDefault();191 }).mousemove(function(event){ 192 if(MAction){193 var curX = event.pageX-stx;194 var curY = event.pageY-sty; 195 moveEle.css({"left":eleLeft+curX,"top":eleTop+curY});196 event.preventDefault();197 }});198 $("body").mouseup(function(event){199 stx = etx = curX = sty = ety = curY = 0;200 MAction = false;201 202 });203 }204 205 function touchDrag() {206 var moveEle = keyboard;207 var eventEle = keyboard_menu;208 var stx = sty = etx = ety = curX = curY = 0;209 var TAction = false;210 var eleLeft = +moveEle.css("left").split('px')[0];211 var eleTop = +moveEle.css("top").split('px')[0];212 213 eventEle.on("touchstart", function(event) { //touchstart214 var event = event.originalEvent;215 TAction = true;216 curX = curY = 0;217 // 元素当前位置218 eleLeft = +moveEle.css("left").split('px')[0];219 eleTop = +moveEle.css("top").split('px')[0];220 // 手指位置221 stx = event.touches[0].pageX;222 sty = event.touches[0].pageY;223 });224 eventEle.on("touchmove", function(event) {225 if(TAction){226 var event = event.originalEvent;227 event.preventDefault();228 curX = event.touches[0].pageX - stx;229 curY = event.touches[0].pageY - sty;230 //alert(eleLeft+"-"+gundongX);231 moveEle.css({"left":eleLeft+curX,"top":eleTop+curY});232 }233 234 });235 eventEle.on("touchend", function(event) {236 stx = etx = curX = sty = ety = curY = 0;237 MAction = false;238 239 });240 241 function getT3d(elem, ename) {242 var elem = elem[0];243 var str1 = elem.style.webkitTransform;244 if (str1 == "") return "0";245 str1 = str1.replace("translate3d(", "");246 str1 = str1.replace(")", "");247 var carr = str1.split(",");248 249 if (ename == "x") return carr[0];250 else if (ename == "y") return carr[1];251 else if (ename == "z") return carr[2];252 else return "";253 }254 }255 }); 256 }; 257 })(jQuery); 今天先写这么多，有时间接着写实现过程。