jQuery软键盘插件
居于jquery框架的软键盘插件。javascript实现软键盘输入。软键盘效果如下图
jQuery软键盘实现源代码如下
<!DOCTYPE html> <style> div.softkb{display:inline-block;position:relative;height:23px;} div.softkb img{cursor:pointer;position:absolute;top:4px;right:5px} div.keyboard{position:absolute;border:solid 1px #5c5c5c;zoom:1;overflow:hidden;padding:3px;background:#e6e6e6;font-size:12px;width:408px;display:none} div.keyboard div.title{text-align:center;color:#870521;font-weight:bold;height:25px;line-height:25px;position:relative} div.keyboard div.title input{color:#000;width:auto;position:absolute;right:0px;bottom:0px;margin:0px} div.keyboard input{width:24px;height:24px;border:solid 1px #5c5c5c;background:#fff;font-size:12px;margin:0px 2px 2px 0px;} div.keyboard input.number,div.keyboard input.close,div.keyboard input.letter{background:#dbdbdb} div.keyboard input.last{margin-right:0px} div.keyboard input.caps,div.keyboard input.delete{width:70px;} div.keyboard div.last input{margin-bottom:0px} div.keyboard input.enter{position:absolute;right:3px;bottom:3px;height:76px;width:44px} </style> <!--让IE6,7支持display inline-block样式--> <!--[if lte IE 7]><style>.softkb{display:inline}</style><![endif]--> 密码:<input type="text" class="softkb" /> <script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script> <script> window.onload = function () {//通过本网站运行功能运行示例时,IE下如果不放入window.onload事件中会找不到script导入的js,实际应用不需要。 /* * jQuery soft keyboard plugin * @requires jQuery1.4+ * @author Showbo * @website:http://www.w3dev.cn/ */ //@submitEvent参数:点击确定时触发的事件,没有配置则隐藏软键盘,事件中this对象指向弹出软键盘的输入框对象(jquery包装过) $.fn.keyBoard = function (submitEvent) { var kb = $('#dvKB'), kbCfg = [['special*1', 'number*10', 'special*2', { t: '← 删 除', c: 'delete'}], ['special*13', { t: '大小写切换', c: 'caps'}], ['letter*10', 'special*4'], ['letter*9', 'special*5'], ['letter*7', 'special*7', { t: '确定', c: 'enter'}]], html, vs = { 'special': [], 'letter': [], 'number': [] }; if (typeof submitEvent != 'function') submitEvent = null; if (kb.length == 0) $(function () { function rnd(min, max) { var tmp = min; if (max < min) { min = max; max = tmp; } return Math.floor(Math.random() * (max - min + 1) + min); } vs.special = '~`!@#$%^&*()_-=+[]{}:;"\'|\\/?>.,<'.split(''); for (var i = 0; i < 10; i++) vs.number[i] = i; for (var i = 97; i < 123; i++) vs.letter[vs.letter.length] = String.fromCharCode(i); html = '<div class="keyboard" id="dvKB"><div class="title"><input type="button" value="关闭软键盘" class="close" /><a href="http://www.w3dev.cn/" target="_blank">Power by Showbo</a></div>'; var item, arr, v, caps = false; for (var i = 0, j = kbCfg.length; i < j; i++) { html += '<div' + (i < j - 1 ? '' : ' class="last"') + '>'; for (var k = 0; k < kbCfg[i].length; k++) { item = kbCfg[i][k]; if (typeof item == 'string') { arr = item.split('*'); item[1] = parseInt(item[1], 10); for (var m = 0; m < arr[1]; m++) { v = vs[arr[0]].splice(rnd(0, vs[arr[0]].length - 1), 1); if (v == '"') v = '"'; html += '<input type="button" class="' + arr[0] + '" value="' + v + '"/>'; } } else html += '<input type="button" class="last ' + item.c + '" value="' + item.t + '"/>'; } html += '</div>'; } html += '</div>'; kb = $(html); var btn, cls, ipt; kb.appendTo(document.body).find('input').click(function () { btn = $(this); ipt = kb.data('input'); v = ipt.val(); cls = btn.attr('class').replace(/ ?last ?/, ''); switch (cls) { case 'delete': if (v != '') ipt.val(v.substring(0, v.length - 1)); break; case 'enter': case 'close': if (cls == 'enter' && submitEvent) submitEvent.call(ipt); kb.hide(); break; case 'caps': caps = !caps; kb.find('input.letter').val(function () { return this.value[caps ? 'toUpperCase' : 'toLowerCase'](); }); break; default: v += btn.val(); ipt.val(v); break; } }); }); return this.each(function () { var el = $(this); el.removeClass('softkb').wrap('<div class="softkb"></div>').parent().append('<img alt="keyboard" src="/demo/soft-keyboard/kb.png" />'); }) .next().click(function () { var next = $(this).prev(), p = next.offset(); kb.data('input', next); kb.css({ top: p.top + next.outerHeight(true), left: p.left }).show(); }).end(); } $('input.softkb').keyBoard(); } </script>
加支付宝好友偷能量挖...
原创文章,转载请注明出处:jQuery软键盘插件