jQuery软键盘插件

  居于jquery框架的软键盘插件。javascript实现软键盘输入。软键盘效果如下图

jQuery软键盘插件

  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 = '&quot;';
                                    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软键盘插件

评论(0)Web开发网
阅读(823)喜欢(0)JavaScript/Ajax开发技巧