`
keep_going
  • 浏览: 12053 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jQuery开发的随机键盘，支持数字键盘和全键盘

 
阅读更多 
1、目前该键盘支持数字键盘，全字符键盘，实现代码如下：
function  KeyBoard() {
    function randomSortOne(a, b) {
        return Math.random() > 0.5 ? 1 : -1;
    } 

    function randomSortTwo(oldArr) {
        var newArr = new Array;
        var length = oldArr.length;
        for(var i = 0; i < length; i ++) {
            newArr[i] = oldArr.splice(Math.floor(Math.random() * oldArr.length), 1);
        }
        return newArr;
    }

 
    function getRandomNumber() {
        var oldArr = new Array;
        for(var i = 0; i < 10; i ++) 
            oldArr[i] = i;
        oldArr.sort(randomSortOne);
        return oldArr;
    } 

    /**
     * 获取随机字符数组
     * @param startASCII 开始字符对应ASCII的值
     * @param charNum    字符个数
     * @returns {Array}  排序后字符数组
     */
    function getRandomNomarlChar(startASCII, charNum) {
        var charArr = new Array;
        var i, j;
        for(i = 0, j = startASCII; i < charNum; i ++, j++) {
            charArr[i] = j;
        }
        charArr.sort(randomSortOne);
        for(i = 0; i < charArr.length; i++) {
            charArr[i] = String.fromCharCode(charArr[i]);
        }
        return charArr;
    }

 
    /**
     * 获取特殊无序数组
     * @param arr 特殊字符ASCII数组
     * @returns   无序的ASCII数组
     */
    function getRandomChar(arr) {
       arr.sort(randomSortOne);
       for(var i = 0; i < arr.length; i++) {
           arr[i] = String.fromCharCode(arr[i]);
       }
       return arr;
    }

 
    /**
     * 处理键盘事件，用于对软键盘操作
     * @param sInputId 输入框id
     * @param kb  
     * @returns {Boolean}
     */
    function dealKeyBoardEvents(sInputId, kb) {
        $("td", kb).mouseover(function() {
            this.className += "kb-mouseover";
        }).mouseout(function() {
            this.className = this.className.replace("kb-mouseover", "");
        }).click(function() {
            if(this.id == "kbClose" || this.id == "kbEnter") {    //关闭和确定键
                kb.remove();                   
                $("#" + sInputId).focus();             
                return false;
            } else if(this.id == "kbClear") {                     //清除键
                $("#" + sInputId).val("");
                return false;
            } else if(this.id == "kbBackspace") {                 //回格键
                var sText = "";
                var ilen = ($("#" + sInputId).val()).length;
                if(ilen > 1) {
                    sText = ($("#" + sInputId).val()).substring(0, ilen - 1);
                }
                $("#" + sInputId).val(sText);
                return false;
            } else if(this.id == "kbCaps") {                      //大小写键
                $(".kb-key", kb).each(function(i, o) {
                    var num = o.innerHTML.charCodeAt(0);
                    if(num >= 97 && num <= 122) {
                        o.innerHTML = String.fromCharCode(num).toUpperCase();
                    } else if(num >= 65 && num <= 90) {
                        o.innerHTML = String.fromCharCode(num).toLowerCase();
                    }
                });
                return false;
            } else if(this.innerHTML == "&lt;" && !isMaxLength(sInputId)) {       
                $("#" + sInputId).attr("value", $("#" + sInputId).val() + "\<");
            } else if(this.innerHTML == "&gt;" && !isMaxLength(sInputId)) {                 
                $("#" + sInputId).attr("value", $("#" + sInputId).val() + "\>");
            } else if(this.innerHTML == "&amp;" && !isMaxLength(sInputId)) {                                
		$("#" + sInputId).attr("value", $("#" + sInputId).val() + "\&");
            } else if(this.innerHTML == "&nbsp;" && !isMaxLength(sInputId)) {              
                $("#" + sInputId).attr("value", $("#" + sInputId).val() + "");
            } else {                                              
                if(!isMaxLength(sInputId)) {
                    $("#" + sInputId).attr("value", $("#" + sInputId).val() + this.innerHTML);
                }
            }
        });
        return false;
    } 

    /**
     * 获取数字键盘
     * @param sInputId  输入框id
     * @param kb        容器jQuery对象
     * @returns {Boolean}
     */
    function getNumerKeyBoard(sInputId, kb) {
        var keyBoard = "<table class='kb-table'><tr>";
        var numArr = getRandomNumber();
        for(var i = 0; i < 10; i ++) {
            if(i == 3) keyBoard += "<td id='kbClose' class='kb-close' colspan='2'>关闭</td>";
            if(i == 6) keyBoard += "<td id='kbClear' class='kb-clear' colspan='2'>清除</td>";
            if(i == 9) keyBoard += "<td id='kbEnter' class='kb-enter' colspan='2'>确定</td>";
            if(i % 3 == 0 && i > 0) keyBoard += "</tr><tr>";
            keyBoard += "<td class='kb-key'>" + numArr[i] + "</td>";
        }
        keyBoard += "<td class='kb-key'>&nbsp;</td><td id='kbBackspace' class='kb-backspace' colspan='3'>← 回格</td></tr></table>";
        kb.html(keyBoard);
        kb.appendTo("body");
        dealKeyBoardEvents(sInputId, kb);
        return false;
    } 
    /**
     * 获得全键盘
     * @param sInputId      输入框的id
     * @param kb            容器jQuery对象
     * @returns {Boolean}
     */
    function getAllKeyBoard(sInputId, kb) {
        var i, keyBoard = "<table class='kb-table'><tr>";
        var numArr = getRandomNumber();
        var charNomarlArr = getRandomNomarlChar(97, 26);
        var arr = [33,64,35,36,37,94,38,42,40,41,95,43];
        var charArr = getRandomChar(arr);
        //输出特殊字符
        for(i = 0; i < charArr.length; i ++) {
            keyBoard += "<td class='kb-key'>" + charArr[i] + "</td>";
        }
        keyBoard += "</tr><tr>";
        //输出数字
       for(i = 0; i < numArr.length; i ++) {
           keyBoard += "<td class='kb-key'>" + numArr[i] + "</td>";
       }
       keyBoard += "<td id='kbBackspace' class='kb-bankspace' colspan='2'>← 回格</td></tr><tr>";
       //输出字母字符
       for(i = 0; i < charNomarlArr.length; i++) {
           if(i == 10) keyBoard += "<td id='kbCaps' class='kb-caps' colspan='2'>大小写</td>";
           if(i == 20) keyBoard += "<td id='kbClear' class='kb-clear' colspan='2'>清除</td>";
           if(i % 10 == 0 && i > 0) keyBoard += "</tr><tr>";
           keyBoard += "<td class='kb-key'>" + charNomarlArr[i] + "</td>";
       }
       keyBoard += "<td colspan='3' id='kbClose' class='kb-close'>关闭</td>";
       keyBoard += "<td id='kbEnter' colspan='3' class='kb-enter'>确定</td></tr></table>";
       kb.html(keyBoard);
       kb.appendTo("body");
       dealKeyBoardEvents(sInputId, kb);
       return false;
    } 

    /**
     * 是否达到输入的最大长度
     * @param sInputId      输入框的id
     * @returns {Boolean}
     */
    function isMaxLength(sInputId) {
        var sValue = $("#" + sInputId).attr("maxlength");
        if(sValue != null && sValue != undefined && sValue != "" && ($("#" + sInputId).val()).length == Number(sValue)) {
            return true;
        }
        return false;
    } 
    /**
     * 显示键盘
     * @param sInputId      输入框的id
     * @param keyStatus     显示键盘的类型
     */
     this.showKeyBoard = function(sInputId, keyStatus) {
         $("#" + sInputId).focus(function() {
             this.blur();
         });
         var kb = $("#keyboard");
         if(kb.length != 0) {
             kb.remove();
             $("#" + sInputId).focus();
             return false;
         }
         kb = $("<div id='keyboard' class='kb-div'></div>");
         if(keyStatus == KeyStatus.KEY_NUMBER) {                 
             getNumerKeyBoard(sInputId, kb);
         } else if(keyStatus == KeyStatus.KEY_ALL) {             
             getAllKeyBoard(sInputId, kb);
         }
         // 配置显示键盘在输入框的位置
         var offset = $("#" + sInputId).offset();
         var left = offset.left;
         var height = $("#" + sInputId).height();
         var top = offset.top + height + 15;
         kb.css({left: left + "px", top: top + "px"});
    };
}

/**
 * 键盘类型常量
 */
var KeyStatus = {
 KEY_NUMBER: 0,               //数字键盘
 KEY_ALL   : 1                //全键盘
};

 

2、样式文件：
/*软键盘样式-------------*/

/*软键盘父容器样式*/
.kb-div {
   border:2px solid #ccc;
   background: #f2f2f2;
   cursor: pointer;
   font: 12px "Arial" "Helvetica" "sans-serif";
   position: absolute;
   z-index: 100;
}
/*软键盘表格容器样式*/
.kb-table {
   border-collapse: separate;
   border-spacing: 3px;
}
/*软键盘单元格样式*/
.kb-table td{
   border-right: 1px solid #9F9F9F;
   border-bottom: 1px solid #9F9F9F;
   line-height: 18px !important;
   text-align: center;

}
/*软键盘[数字]样式*/
.kb-key {
   background: white;
   padding:0 5px;
   width:18px;
}
/*软键盘[关闭，清除，大小写]样式*/
.kb-close,.kb-clear,.kb-caps,.kb-backspace{
   background: #ddd;
   color:#039;
   font-weight:bold;
   text-align: center; 
   width:57px;
}

/*软键盘单元格鼠标动作样式*/
td.kb-mouseover {
   background: url(img/time_date_bg.gif) repeat-x;
   color: #fff;
}

 

3、举例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="pragma" content="no-cache" />    
    <link rel="stylesheet" type="text/css" href="KeyBoard.css" media="all"/>
 
    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript" src="KeyBoard.js"></script>
    <script type="text/javascript">
      function showKeyBoard() {
         var keyBoard = new KeyBoard();
         keyBoard.showKeyBoard("inPwd", 1);
      }
    </script>
    <title>软键盘</title>
  </head>
  <body>
    <div>
     <table>
       <tr>
         <td>密码:</td>
         <td><input id="inPwd" name="inPwd" type="password" maxlength="6" onclick="showKeyBoard();"/></td>
       </tr>
     </table>
   </div>
 </body>
</html>

 

分享到：
| 基金网上交易
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery数字键盘银行网站数字键盘

    "jquery数字键盘银行网站数字键盘"就是一个针对这种需求的解决方案。它基于jQuery库，提供了简洁易用的数字输入键盘界面，确保用户只能输入数字，从而防止了通过常规键盘输入时可能存在的安全风险。 jQuery是一个...

    jQuery虚拟数字键盘插件

    **jQuery虚拟数字键盘插件**是一种实用的前端开发工具，主要应用于移动设备或触摸屏设备上的Web应用，为用户提供一个方便的数字输入界面。在网页上，它模拟了一个物理数字键盘，用户可以通过触摸屏幕来输入数字，而...

    jQuery虚拟键盘数字字母软键盘代码.zip

    总结来说，jQuery虚拟键盘数字字母软键盘代码是网页开发中的实用工具，通过利用jQuery的强大功能，为用户提供直观、方便的输入体验。无论是数字输入、字母输入还是符号输入，都能有效地提升网页的交互性和用户满意度...

    jQuery虚拟数字键盘

    **jQuery虚拟数字键盘** 在网页应用中，有时我们需要为用户提供一个仅限数字输入的界面，例如在填写电话号码、身份证号或密码时。在这种情况下，使用传统的文本输入框可能不够安全或者不够用户友好。为此，我们可以...

    jQueryNumPad是一款移动端友好的jQuery数字键盘插件

    jQuery NumPad插件是基于流行的JavaScript库jQuery构建的，它的主要功能是提供一个可自定义的数字键盘界面，用户可以直接在移动端设备上进行数字输入，而无需与全尺寸的虚拟键盘进行交互。这不仅优化了用户体验，还...

    jQuery虚拟数字键盘按键输入代码.zip

    《jQuery虚拟数字键盘按键输入代码详解》 在现代网页开发中，为了提升用户体验，尤其是在移动设备上处理敏感信息（如密码输入）时，虚拟键盘成为了一种必要的交互方式。"jQuery虚拟数字键盘按键输入代码"就是一个...

    jquery数字键盘

    【jQuery数字键盘】是一种网页交互元素，主要用于网页上的数字输入场景，例如在线表格、金融计算器或者密码输入等。它提供了一种便捷的方式，使用户无需离开当前页面就能通过模拟的数字键盘输入数值，提升了用户体验...

    移动端友好的jQuery数字键盘插件

    为了解决这一问题，开发人员创建了`jQuery.NumPad`这款插件，它专为移动端设计，提供了一个友好的数字键盘，方便用户在数字输入场景下进行快速、准确的输入。 `jQuery.NumPad`的核心功能是生成一个可自定义的数字...

    jquery实现的数字小键盘

    本项目"jquery实现的数字小键盘"是利用jQuery来创建一个专用于输入数字的虚拟键盘，确保用户输入的数据始终保持为数字格式，避免了在输入过程中可能出现的非数字字符，从而提高数据的准确性和安全性。 首先，我们要...

    jQuery手机移动端点击弹出数字键盘输入代码.zip

    jQuery作为一款广泛使用的JavaScript库，提供了丰富的功能来优化网页交互，其中包括在手机移动端实现点击弹出数字键盘输入的功能。本篇文章将深入探讨这一话题，帮助开发者理解并掌握相关技术。 首先，我们需要了解...

    jquery数字软键盘(无英文字母)

    总结起来，jQuery数字软键盘是一种实用的网页开发技术，尤其适用于移动设备或者需要安全数字输入的场景。通过理解和实践，我们可以创建出符合特定需求的数字输入解决方案，提升用户的输入体验。

    jQuery验证码随机数字运算代码.zip

    jQuery验证码随机数字运算代码是为网页开发设计的一种验证码实现方式，它通过JavaScript（JS）动态生成包含数字和运算符号的随机验证码，增加了破解的难度，同时提供了一种更友好的用户体验。 首先，jQuery是一个...

    jQueryUI jQueryUI插件 键盘插件

    这使得它能够适应各种场景，如数字输入、全键盘输入或者特定字符集的输入。 2. **易用性**：只需简单的几行代码，开发者就能将键盘插件集成到页面中，大大减少了开发时间和复杂度。通常，你只需要选择一个元素（如...

    基于jquery实现的虚拟数字键盘

    使用jquery实现的一个简单的虚拟键盘，该键盘使用时引入jquery。键盘针对input type为text的时候进行响应。

    jQuery软键盘模拟键盘

    jQuery软键盘模拟键盘是一种在网页上实现用户交互的实用工具，尤其适用于移动设备或需要在特定输入区域模拟物理键盘的场景。这个插件利用JavaScript库jQuery的强大功能，为用户提供了一个可自定义、易于集成的虚拟...

    移动端友好的jQuery数字键盘插件.zip

    为了改善这一情况，`jQuery.NumPad`是一个专门设计的数字键盘插件，旨在提供一个便捷、自定义且兼容多UI框架的解决方案。这款插件是针对移动端优化的，确保用户在触摸屏设备上填写数字字段或密码输入时能有流畅的...

    jQuery随机数字抽奖代码.zip

    《jQuery随机数字抽奖代码》是基于JavaScript...整体来看，这个jQuery随机数字抽奖代码是一个结合了jQuery基础用法、DOM操作、动画效果和随机数生成的实例，适合初学者了解和学习Web开发中的互动元素和基本的动画实现。

    jquery 监听 键盘 事件

    本文将深入探讨如何使用jQuery来监听键盘事件，以及相关的应用场景和技巧。 ### 1. jQuery键盘事件绑定 jQuery提供了`.on()`方法来绑定事件，包括键盘事件。键盘事件主要有三种类型： - `keydown`：当用户按下...

    jQuery虚拟数字键盘插件.zip

    **jQuery虚拟数字键盘插件**是一种用于网页交互增强的实用工具，主要针对那些需要用户输入数字的场景，如在线支付、手机号码验证等。通过这个插件，开发者能够轻松地在网页上添加一个可自定义的数字键盘，提高用户...

Magicbox
Global site tag (gtag.js) - Google Analytics