/**
 * 虛擬數字鍵盤方法參數說明︰
 * 1.click_objId︰觸發顯示鍵盤的Dom節點Id
 * 2.even︰觸發方法[默認為click],可以不傳遞,建議不要修改觸發事件方式
 * 3.Input_texId︰接收內容的Dom節點Id
 * 4.parent_objId:將鍵盤插入到何處Id
 * 5.keyBordLeft:鍵盤距離左邊定位位置[默認為0],可以不傳遞
 * 6.keyBordTop︰鍵盤距離頂部定位位置[默認為parent_objId的高度],可以不傳遞參數
 * 7.len:表示最大輸入多少個字符[可以不傳遞]
 * */
function numKeyBord(options) {
    var click_objId = options.click_objId;
    var even = options.even || "click";
    var parent_objId = options.parent_objId;
    var Input_texId = options.Input_texId;
    var keyBordLeft = options.keyBordLeft || "0px";
    var keyBordTop = options.keyBordTop || $(parent_objId).outerHeight(true);
    var len = options.len;
    var idStr = click_objId.substring(1);
    if (click_objId.length == 0) {
        return;
    };
    $(click_objId).on(even, function () {
        $("#keybord" + idStr).remove();

        /*創建一個div存放鍵盤*/
        var keybord = '<div tabindex="99" id="keybord' + idStr + '">'
				  		+ '<h2>'
				  			+ '<span class="kbElement keyBordLogo">中國建設銀行</span>'
					  		+ '<span class="kbElement keyInfoBtn">使用鍵盤輸入</span>'
				  		+ '</h2>'
				  		+ '<table border="0" cellpadding="0" cellspacing="0" class="keybordTable">'
				  			+ '<tr class="tr_second">'
				  				+ '<td data-title="" class="kbElement random on"><span>0</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>1</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>2</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>3</span></td>'
				  			+ '</tr>'
				  			+ '<tr>'
				  				+ '<td data-title="" class="kbElement random on"><span>4</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>5</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>6</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>7</span></td>'
				  			+ '</tr>'
				  			+ '<tr>'
				  				+ '<td data-title="" class="kbElement random on"><span>8</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>9</span></td>'
				  				+ '<td data-title="" class="kbElement keyBordDele"><span>退格</span></td>'
				  				+ '<td data-title="" class="kbElement keyBordConfirmBtn"><span>確定</span></td>'
				  			+ '</tr>'
				  		+ '</table>'
				  	   + '</div>';
        /*追加到dom節點中*/
        $(parent_objId).append(keybord);
        $("#keybord" + idStr).focus();
        /*定義樣式*/
        $(parent_objId).css({
            position: "relative"
        });
        $(Input_texId).attr({ "readonly": "readonly" });
        $("#keybord" + idStr).css({
            width: "205px",
            height: "184px",
            border: "1px solid #9ACDEC",
            fontSize: "14px",
            fontFamily: "微軟雅黑",
            position: "absolute",
            zIndex: "4",
            background: "#FFF",
            left: keyBordLeft,
            top: keyBordTop
        });
        $("#keybord" + idStr + " h2").css({
            width: "100%",
            height: "30px",
            background: "#8BC3E3",
            fontSize: "16px",
            fontWeight: "100",
            lineHeight: "30px",
            color: "#1966B6",
            textIndent: "10px"
        });
        $("#keybord" + idStr + " .keyBordLogo,#keybord" + idStr + " .keyBordInfo").css({

        });
        $("#keybord" + idStr + " .keyInfoBtn").css({
            border: "1px solid #2C59AA",
            background: "#fff",
            width: "80px",
            height: "20px",
            marginLeft: "6px",
            fontSize: "13px",
            paddingLeft: "5px",
            paddingRight: "5px",
            cursor: "pointer",
            color: "#000"
        });
        $("#keybord" + idStr + " .keybordTable td,#keybord" + idStr + " .keybordTable td span").css({
            width: "50px",
            height: "50px",
            lineHeight: "50px",
            border: "1px solid #ddd",
            textAlign: "center",
            cursor: "pointer",
            margin: "0px",
            padding: "0"
        });
        $("#keybord" + idStr + " .keybordTable td span").css({
            display: "block",
            border: "none"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordDele,#keybord" + idStr + " .keybordTable td.keyBordDele span").css({
            width: "50px",
            height: "50px",
            lineHeight: "50px"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordDele span").css({
            display: "block",
            border: "none"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordConfirmBtn,#keybord" + idStr + " .keybordTable td.keyBordConfirmBtn span").css({
            width: "50px",
            height: "50px",
            lineHeight: "50px"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordConfirmBtn span").css({
            display: "block",
            border: "none"
        });
        /*定義移除的方法*/

        /*關閉虛擬鍵盤*/
        function removeKeyBord() {
            $("#keybord" + idStr + " .keyInfoBtn").on("click", function () {
                $(Input_texId).removeAttr("readonly");
                $(Input_texId).focus();
                $(Input_texId).removeAttr("readonly");

                $("#keybord" + idStr).remove();
                setTimeout(function () {
                    //$(Input_texId).removeAttr("readonly");
                    //$(Input_texId).click({ flag: "-1" });
                    //$(":text").eq(0).focus();
                    //$(Input_texId).focus();
                }, 1);
            });

            $("#keybord" + idStr).blur(function () {
                var actElm = document.activeElement;
                if (actElm.parentNode != null && actElm.parentNode.getAttribute("class") != null && actElm.parentNode.getAttribute("class").indexOf("kbElement") > -1) {
                    $("#keybord" + idStr).focus();
                }
                else {
                    $(Input_texId).removeAttr("readonly");
                    $(Input_texId).removeAttr("readonly");
                    $("#keybord" + idStr).remove();
                }

            });
        };
        removeKeyBord();



        /*點擊確定按鈕*/
        function keyBordConfirmBtn() {
            $(".keyBordConfirmBtn").on("click", function () {
                $("#keybord" + idStr).remove();
                $(Input_texId).removeAttr("readonly");
            });
        };
        keyBordConfirmBtn();

        /*鼠標放上去邊框變色及點擊加值時候*/
        function handle() {
            $("#keybord" + idStr + " .keybordTable td").each(function (index, element) {
                var $this = $(this);
                $this.on("click", function () {
                    $this.css({
                        background: "#f00",
                        color: "#fff",
                        fontWeight: "800"
                    }).siblings().css({
                        background: "#fff",
                        color: "#000",
                        fontWeight: "100"
                    }).parent("tr").siblings().find("td").css({
                        background: "#fff",
                        color: "#000",
                        fontWeight: "100"
                    });
                });

                $this.hover(function () {
                    $this.css({ "border": "1px solid #8BC3E3" });
                }, function () {
                    $this.css({ "border": "1px solid #ddd" });
                });
                /*填充內容*/
                if ($this.hasClass("on")) {
                    $this.on("click", function () {
                        var str = $(Input_texId).val();
                        str += $this.text();
                        if (str.length > len) {
                            str = str.substring(0, (str.length - 1));
                        }
                        $(Input_texId).val(str);
                        if ($(Input_texId).attr("type") == "password") {
                            $(Input_texId).trigger("change");//基礎組需要將密碼加密
                        }
                    });
                };
            });
        }
        handle();

        /*刪除內容*/
        function removeContent() {
            $(".keyBordDele").on("click", function () {
                var str = $(Input_texId).val();
                str = str.substring(0, (str.length - 1));
                $(Input_texId).val(str);
            });
        };
        removeContent();

        /*隨機排序*/
        function randomSord() {
            var arrayNums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
            for (var i = 0; i < arrayNums.length; i++) {
                var randomNum = parseInt(Math.random() * 10);
                var tmp = arrayNums[0];
                arrayNums[0] = arrayNums[randomNum];
                arrayNums[randomNum] = tmp;
            };
            $(".keybordTable td.random").each(function (index, element) {
                $(this).find("span").text(arrayNums[index]);
            });
        };
        randomSord();
    });
};


/**
 * 虛擬鍵盤方法參數說明︰
 * 1.click_objId︰觸發顯示鍵盤的Dom節點Id
 * 2.even︰觸發方法[默認為click],可以不傳遞,建議不要修改觸發事件方式
 * 3.Input_texId︰接收內容的Dom節點Id
 * 4.parent_objId:將鍵盤插入到何處Id
 * 5.keyBordLeft:鍵盤距離左邊定位位置[默認為0],可以不傳遞
 * 6.keyBordTop︰鍵盤距離頂部定位位置[默認為parent_objId的高度],可以不傳遞參數
 * 7.len:表示傳遞最多字符[可以不傳遞]
 * */

function showKeyBord(options) {
    var click_objId = options.click_objId;
    var even = options.even || "click";
    var parent_objId = options.parent_objId;
    var Input_texId = options.Input_texId;
    var keyBordLeft = options.keyBordLeft || "0px";
    var keyBordTop = options.keyBordTop || $(parent_objId).outerHeight(true);
    var len = options.len;
    var idStr = click_objId.substring(1);
    if (click_objId.length == 0) {
        return;
    };

    $(click_objId).on(even, function () {
        $("#keybord" + idStr).remove();
        /*創建一個div存放鍵盤*/
        var keybord = '<div  tabindex="99" style="display:none" id="keybord' + idStr + '">'
				  		+ '<h2>'
				  			+ '<span class="keyBordLogo">中國建設銀行&nbsp;&nbsp;&nbsp;&nbsp;密碼輸入器</span>'
					  		+ '<span class="keyInfoBtn">使用鍵盤輸入</span>'
				  		+ '</h2>'
				  		+ '<table border="0" cellpadding="0" cellspacing="0" class="keybordTable">'
				  			+ '<tr>'
				  				+ '<td data-title="" class="kbElement on"><span>~</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>!</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>@</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>#</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>$</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>%</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>^</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>&</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>*</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>(</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>)</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>-</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>+</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>|</span></td>'
				  				+ '<td data-title="" class="kbElement keyBordDele"><span>退格</span></td>'
				  			+ '</tr>'
				  			+ '<tr class="tr_second">'
				  				+ '<td data-title="" class="kbElement on"><span>`</span></td>'
				  				+ '<td data-title="" class="kbElement on random"><span>0</span></td>'
				  				+ '<td data-title="" class="kbElement on random"><span>1</span></td>'
				  				+ '<td data-title="" class="kbElement on random"><span>2</span></td>'
				  				+ '<td data-title="" class="kbElement on random"><span>3</span></td>'
				  				+ '<td data-title="" class="kbElement on random"><span>4</span></td>'
				  				+ '<td data-title="" class="kbElement on random"><span>5</span></td>'
				  				+ '<td data-title="" class="kbElement on random"><span>6</span></td>'
				  				+ '<td data-title="" class="kbElement on random"><span>7</span></td>'
				  				+ '<td data-title="" class="kbElement on random"><span>8</span></td>'
				  				+ '<td data-title="" class="kbElement on random"><span>9</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>_</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>=</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>\\</span></td>'
                                + '<td data-title="" class="kbElement keyBordSpace"><span>空格</span></td>'
				  			+ '</tr>'
				  			+ '<tr class="tr_third">'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>q</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>w</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>e</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>r</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>t</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>y</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>u</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>i</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>o</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>p</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>{</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>}</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>[</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>]</span></td>'
				  				+ '<td data-title="" class="kbElement upLowKeybordBtn"><span>切換大小寫</span></td>'
				  			+ '</tr>'
				  			+ '<tr class="tr_fourth">'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>a</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>s</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>d</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>f</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>g</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>h</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>j</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>k</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>l</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>:</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>;</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>"</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>\'</span></td>'
				  				+ '<td data-title="" rowspan="2" colspan="2" class="kbElement keyBordConfirmBtn"><span>確定</span></td>'
				  			+ '</tr>'
				  			+ '<tr class="tr_fifth">'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>z</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>x</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>c</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>v</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>b</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>n</span></td>'
				  				+ '<td data-title="" class="kbElement upcase on random"><span>m</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span><</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>,</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>></span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>.</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>?</span></td>'
				  				+ '<td data-title="" class="kbElement on"><span>/</span></td>'
				  			+ '</tr>'
				  		+ '</table>'
				  + '</div>';
        /*追加到dom節點中*/
        $(parent_objId).append(keybord);
        $("#keybord" + idStr).focus();
        /*定義樣式*/
        $(parent_objId).css({
            position: "relative"
        });
		$(Input_texId).attr({"readonly":"readonly"});
        $("#keybord" + idStr).css({
            width: "445px",
            height: "136px",
            border: "1px solid #9ACDEC",
            fontSize: "14px",
            fontFamily: "微軟雅黑",
            position: "absolute",
            zIndex: "4",
            background: "#FFF",
            left: keyBordLeft,
            top: keyBordTop
        });
        $("#keybord" + idStr + " h2").css({
            width: "100%",
            height: "30px",
            background: "#8BC3E3",
            fontSize: "16px",
            fontWeight: "100",
            lineHeight: "30px",
            color: "#1966B6",
            textIndent: "70px"
        });
        $("#keybord" + idStr + " .keyBordLogo,#keybord" + idStr + " .keyBordInfo").css({

        });
        $("#keybord" + idStr + " .keyInfoBtn").css({
            border: "1px solid #2C59AA",
            background: "#fff",
            width: "80px",
            height: "20px",
            marginLeft: "35px",
            fontSize: "13px",
            paddingLeft: "5px",
            paddingRight: "5px",
            cursor: "pointer",
            color: "#000"
        });
        $("#keybord" + idStr + " .keybordTable td,#keybord" + idStr + " .keybordTable td span").css({
            width: "25px",
            height: "20px",
            lineHeight: "20px",
            border: "1px solid #ddd",
            textAlign: "center",
            cursor: "pointer",
            margin: "0px",
            padding: "0px"
        });
        $("#keybord" + idStr + " .keybordTable td span").css({
            display: "block",
            border: "none"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordDele,#keybord" + idStr + " .keybordTable td.keyBordDele span").css({
            width: "75px",
            height: "20px"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordDele span").css({
            display: "block",
            border: "none"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordSpace,#keybord" + idStr + " .keybordTable td.keyBordSpace span").css({
            width: "75px",
            height: "20px"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordSpace span").css({
            display: "block",
            border: "none"
        });
        $("#keybord" + idStr + " .keybordTable td.upLowKeybordBtn,#keybord" + idStr + " .keybordTable td.upLowKeybordBtn span").css({
            width: "75px",
            height: "20px"
        });
        $("#keybord" + idStr + " .keybordTable td.upLowKeybordBtn span").css({
            display: "block",
            border: "none"
        })
        $("#keybord" + idStr + " .keybordTable td.keyBordConfirmBtn,#keybord" + idStr + " .keybordTable td.keyBordConfirmBtn span").css({
            width: "105px",
            height: "40px",
            lineHeight: "40px"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordConfirmBtn span").css({
            display: "block",
            border: "none"
        });
        $("#keybord" + idStr).css({
            display: "block"
        });
        /*定義移除的方法*/
        
        /*關閉虛擬鍵盤*/
        function removeKeyBord() {
           
            $("#keybord" + idStr + " .keyInfoBtn").on("click", function () {
                $(Input_texId).removeAttr("readonly");
                $(Input_texId).focus();
                $(Input_texId).removeAttr("readonly");
                
                $("#keybord" + idStr).remove();
				setTimeout(function () {
				    //$(Input_texId).removeAttr("readonly");
					//$(":text").eq(0).focus();
				    //$(Input_texId).focus();
				    
				},1);
                
            });

            $("#keybord" + idStr).blur(function () {
                var actElm = document.activeElement;
                if (actElm.parentNode != null && actElm.parentNode.getAttribute("class") != null && actElm.parentNode.getAttribute("class").indexOf("kbElement") > -1) {
                    $("#keybord" + idStr).focus();
                }
                else {
                    $(Input_texId).removeAttr("readonly");
                    $(Input_texId).removeAttr("readonly");
                    $("#keybord" + idStr).remove();
                }

            });
        };
        removeKeyBord();

        /*切換大小寫*/
        function upLowCase() {
            var onOff = true;
            $(".upLowKeybordBtn").on("click", function () {
                $("#keybord" + idStr + " tr td.upcase").each(function (index, element) {
                    if (onOff) {
                        $(this).find("span").text($(this).find("span").text().toUpperCase());
                    } else {
                        $(this).find("span").text($(this).find("span").text().toLowerCase());
                    };
                });
                onOff = !onOff;
            });
        };
        upLowCase();

        /*點擊確定按鈕*/
        function keyBordConfirmBtn() {
            $(".keyBordConfirmBtn").on("click", function () {
                $("#keybord" + idStr).remove();
				$(Input_texId).removeAttr("readonly");
            });
        };
        keyBordConfirmBtn();

        /*鼠標放上去邊框變色及點擊加值時候*/
        function handle() {
            $("#keybord" + idStr + " .keybordTable td").each(function (index, element) {
                var $this = $(this);
                $this.on("click", function () {
                    $this.css({
                        background: "#8BC3E3",
                        color: "#fff",
                        fontWeight: "800"
                    }).siblings().css({
                        background: "#fff",
                        color: "#000",
                        fontWeight: "100"
                    }).parent("tr").siblings().find("td").css({
                        background: "#fff",
                        color: "#000",
                        fontWeight: "100"
                    });
                });

                $this.hover(function () {
                    $this.css({ "border": "1px solid #8BC3E3" });
                }, function () {
                    $this.css({ "border": "1px solid #ddd" });
                });
                /*填充內容*/
                if ($this.hasClass("on")) {
                    $this.on("click", function () {
                        var str = $(Input_texId).val();
                        str += $this.text();
                        if (str.length > len) {
                            str = str.substring(0, (str.length - 1));
                        };
                        $(Input_texId).val(str);
                        if ($(Input_texId).attr("type") == "password") {
                            $(Input_texId).trigger("change");//基礎組需要將密碼加密
                        }
                    });
                };
            });
        }
        handle();

        /*刪除內容*/
        function removeContent() {
            $(".keyBordDele").on("click", function () {
                var str = $(Input_texId).val();
                str = str.substring(0, (str.length - 1));
                $(Input_texId).val(str);
            });
        };
        removeContent();

        /*添加空格*/
        function addSpace() {
            $(".keyBordSpace").on("click", function () {
                var str = $(Input_texId).val();
                $(Input_texId).val(str+' ');
            });
        };
        addSpace();

        /*隨機排序*/
        function randomSord() {
            var arrayNums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
            var arrayLists1 = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
            var arrayLists2 = ["a", "s", "d", "f", "g", "h", "j", "k", "l"];
            var arrayLists3 = ["z", "x", "c", "v", "b", "n", "m"];

            for (var i = 0; i < arrayNums.length; i++) {
                var randomNum = parseInt(Math.random() * 10) % arrayNums.length;
                var tmp = arrayNums[0];
                arrayNums[0] = arrayNums[randomNum];
                arrayNums[randomNum] = tmp;
            };

            for (var i = 0; i < arrayLists1.length; i++) {
                var randomNum = parseInt(Math.random() * 10) % arrayLists1.length;
                var tmp = arrayLists1[0];
                arrayLists1[0] = arrayLists1[randomNum];
                arrayLists1[randomNum] = tmp;
            };

            for (var i = 0; i < arrayLists2.length; i++) {
                var randomNum = parseInt(Math.random() * 10) % arrayLists2.length;
                var tmp = arrayLists2[0];
                arrayLists2[0] = arrayLists2[randomNum];
                arrayLists2[randomNum] = tmp;
            };

            for (var i = 0; i < arrayLists3.length; i++) {
                var randomNum = parseInt(Math.random() * 10) % arrayLists3.length;
                var tmp = arrayLists3[0];
                arrayLists3[0] = arrayLists3[randomNum];
                arrayLists3[randomNum] = tmp;
            };

            $(".tr_second td.random").each(function (index, element) {
                $(this).find("span").text(arrayNums[index]);
            });

            $(".tr_third td.random").each(function (index, element) {
                $(this).find("span").text(arrayLists1[index]);
            });

            $(".tr_fourth td.random").each(function (index, element) {
                $(this).find("span").text(arrayLists2[index]);
            });

            $(".tr_fifth td.random").each(function (index, element) {
                $(this).find("span").text(arrayLists3[index]);
            });
        };
        randomSord();
    });
};


/**
 * 增強版虛擬數字鍵盤方法參數說明︰
 * 1.click_objId︰觸發顯示鍵盤的Dom節點Id
 * 2.even︰觸發方法[默認為click],可以不傳遞,建議不要修改觸發事件方式
 * 3.Input_texId︰接收內容的Dom節點Id
 * 4.parent_objId:將鍵盤插入到何處Id
 * 5.keyBordLeft:鍵盤距離左邊定位位置[默認為0],可以不傳遞
 * 6.keyBordTop︰鍵盤距離頂部定位位置[默認為parent_objId的高度],可以不傳遞參數
 * 7.len:表示最大輸入多少個字符[可以不傳遞]
 * */
function numKeyBordEx(options) {
    var click_objId = options.click_objId;
    var even = options.even || "click";
    var parent_objId = options.parent_objId;
    var Input_texId = options.Input_texId;
    var keyBordLeft = options.keyBordLeft || "0px";
    var keyBordTop = options.keyBordTop || $(parent_objId).outerHeight(true);
    var len = options.len;
    var idStr = click_objId.substring(1);
    if (click_objId.length == 0) {
        return;
    };
    $(click_objId).on(even, function () {
        if ($("#keybord" + idStr).length >= 1)
            return;

        $("#keybord" + idStr).remove();

        /*創建一個div存放鍵盤*/
        var keybord = '<div tabindex="99" id="keybord' + idStr + '">'
                        + '<i class="keybord_arrow" style="right: auto;"></i>'
				  		+ '<div class="keybord_div"><h2>'
				  			+ '<span class="kbElement keyBordLogo">中國建設銀行</span>'
					  		+ '<span class="kbElement keyInfoBtn">使用鍵盤輸入</span>'
				  		+ '</h2>'
				  		+ '<table border="0" cellpadding="0" cellspacing="0" class="keybordTable">'
				  			+ '<tr>'
				  				+ '<td data-title="" class="kbElement random on"><span>0</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>1</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>2</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>3</span></td>'
				  			+ '</tr>'
				  			+ '<tr>'
				  				+ '<td data-title="" class="kbElement random on"><span>4</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>5</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>6</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>7</span></td>'
				  			+ '</tr>'
				  			+ '<tr>'
				  				+ '<td data-title="" class="kbElement random on"><span>8</span></td>'
				  				+ '<td data-title="" class="kbElement random on"><span>9</span></td>'
				  				+ '<td data-title="" class="kbElement keyBordDele"><span>退格</span></td>'
				  				+ '<td data-title="" class="kbElement keyBordConfirmBtn"><span>確定</span></td>'
				  			+ '</tr>'
				  		+ '</table>'
				  	   + '</div></div>';
        /*追加到dom節點中*/
        $(parent_objId).append(keybord);
        //$("#keybord" + idStr).focus();
        $(Input_texId).blur();
        $(Input_texId).attr("readonly", "true");
        $(Input_texId).focus();

        /*定義樣式*/
        $(parent_objId).css({
            position: "relative"
        });
        $("#keybord" + idStr).css({
            width: "215px",
            height: "180px",
            fontSize: "14px",
            fontFamily: "微軟雅黑",
            position: "absolute",
            zIndex: "4",
            background: "#FFF",
            left: keyBordLeft,
            top: keyBordTop,
            display: "none"
        });
        $("#keybord" + idStr + " .keybord_div").css({
            borderRight: "1px solid #9ACDEC",
            borderLeft: "1px solid #9ACDEC",
            borderBottom: "1px solid #9ACDEC"
        });
        $("#keybord" + idStr + " h2").css({
            width: "100%",
            height: "30px",
            background: "#0066BE",
            fontSize: "16px",
            fontWeight: "100",
            lineHeight: "30px",
            color: "#1966B6",
            textIndent: "10px"
        });
        $("#keybord" + idStr + " .keyBordLogo,#keybord" + idStr + " .keyBordInfo").css({
            color: "#FFF"
        });
        $("#keybord" + idStr + " .keyInfoBtn").css({
            border: "1px solid #2C59AA",
            background: "#fff",
            width: "80px",
            height: "20px",
            marginLeft: "6px",
            fontSize: "13px",
            paddingLeft: "5px",
            paddingRight: "5px",
            cursor: "pointer",
            color: "#000"
        });
        $("#keybord" + idStr + " .keybordTable").css({
            width: "185px",
            margin: "5px 18px",
            fontsize: "20px"
        });
        $("#keybord" + idStr + " .keybordTable td").css({
            width: "40px",
            height: "45px",
            lineHeight: "50px",
            textAlign: "center",
            cursor: "pointer",
            margin: "0px",
            padding: "0px",
            border: "none"
        });
        $("#keybord" + idStr + " .keybordTable td span").css({
            width: "40px",
            height: "40px",
            lineHeight: "40px",
            border: "1px solid #ddd",
            display: "block"
        });
        $("#keybord" + idStr + " .keybordTable td").css({
            width: "40px",
            height: "45px",
            lineHeight: "50px"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordDele span").css({
            width: "40px",
            height: "40px",
            display: "block",
            border: "1px solid #ddd"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordConfirmBtn").css({
            width: "40px",
            height: "45px",
            lineHeight: "50px"
        });
        $("#keybord" + idStr + " .keybordTable td.keyBordConfirmBtn span").css({
            width: "40px",
            height: "40px",
            display: "block",
            border: "1px solid #ddd"
        });
        $("#keybord" + idStr).slideDown("normal", function () { $("#keybord" + idStr).show(); });


        /*定義移除的方法*/
        function removeKeyBord() {
            $("#keybord" + idStr + " .keyInfoBtn").on("click", function () {
                $(Input_texId).removeAttr("readonly");
                $(Input_texId).focus();
                $(Input_texId).removeAttr("readonly");

                $("#keybord" + idStr).slideUp("normal", function () { $("#keybord" + idStr).remove(); });
                setTimeout(function () {
                    //$(Input_texId).removeAttr("readonly");
                    //$(Input_texId).click({ flag: "-1" });
                    //$(":text").eq(0).focus();
                    //$(Input_texId).focus();
                }, 1);
            })
        };
        /*關閉虛擬鍵盤*/
        removeKeyBord();

        $(document).bind("click", function (e) {
            if ($("#keybord" + idStr).length == 0) {
                return;
            }
            var e = e || window.event;
            var elem = e.target || e.srcElement;
            while (elem) {
                if (elem.id == ("keybord" + idStr) || "#" + elem.id == Input_texId || "#" + elem.id == click_objId) {
                    return;
                }
                elem = elem.parentNode;
            }
            $("#keybord" + idStr).slideUp("normal", function () { $("#keybord" + idStr).remove(); });

        });

        /*點擊確定按鈕*/
        function keyBordConfirmBtn() {
            $("#keybord" + idStr +" .keyBordConfirmBtn").on("click", function () {
                $("#keybord" + idStr).slideUp("normal", function () { $("#keybord" + idStr).remove(); });
                $(Input_texId).removeAttr("readonly");
            });
        };
        keyBordConfirmBtn();


        /*鼠標放上去邊框變色及點擊加值時候*/
        function handle() {
            $("#keybord" + idStr + " .keybordTable td").each(function (index, element) {
                var $this = $(this);

                if (BROWSER.isFirefox() || BROWSER.isChrome() || BROWSER.isSafari() || BROWSER.isCurrIE11()) {
                    $this.on("mouseup", function (e) {
                        addRipple(this, e);
                    });
                }
                else {
                    $this.on("mouseup", function (e) {
                        $this.children("span").css({
                            background: "#fff",
                            color: "#000",
                            fontWeight: "100"
                        })
                    });
                    $this.on("mousedown", function (e) {
                        $this.children("span").css({
                            background: "rgba(120, 205, 194, 0.5)",
                            color: "#fff",
                            fontWeight: "800"
                        })
                    });

                }
                
                $this.hover(function () {
                    $this.children("span").css({ "border": "1px solid #8BC3E3" });
                }, function () {
                    $this.children("span").css({ "border": "1px solid #ddd" });
                });

                /*填充內容*/
                if ($this.hasClass("on")) {
                    $this.on("click", function () {
                        var str = $(Input_texId).val();
                        str += $this.text();
                        if (str.length > len) {
                            str = str.substring(0, (str.length - 1));
                        }
                        $(Input_texId).val(str);
                        if ($(Input_texId).attr("type") == "password") {
                            $(Input_texId).trigger("change");//基礎組需要將密碼加密
                        }
                    });
                }
            });
        }
        handle();

        /*刪除內容*/
        function removeContent() {
            $("#keybord" + idStr +" .keyBordDele").on("click", function () {
                var str = $(Input_texId).val();
                str = str.substring(0, (str.length - 1));
                $(Input_texId).val(str);
            });
        };
        removeContent();

        /*隨機排序*/
        function randomSord() {
            var arrayNums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
            for (var i = 0; i < arrayNums.length; i++) {
                var randomNum = parseInt(Math.random() * 10);
                var tmp = arrayNums[0];
                arrayNums[0] = arrayNums[randomNum];
                arrayNums[randomNum] = tmp;
            };
            $("#keybord" + idStr + " .keybordTable td.random").each(function (index, element) {
                $(this).find("span").text(arrayNums[index]);
            });
        };
        randomSord();
    });
};

/*
 按軟鍵盤產生波紋效果
*/
function addRipple(obj,event) {

    var $self = $(obj);
    $self.css("position", "relative");
    
    if ($self.find(".ripple-wrapper").length == 0) {
        $self.append('<div class="ripple-wrapper"></div>');
        $(".ripple-wrapper").css(
        {
            "position": "absolute",
            "top": "0",
            "left": "0",
            "z-index": "1",
            "width": "100%",
            "height": "100%",
            "overflow": "hidden",
            "border-radius": "inherit",
            "pointer-events": "none"
        });
    }
    
    
    var ripple_obj = $self.find(".ripple-wrapper");
    if (ripple_obj.find("div").length) {
        ripple_obj.find("div").remove();
    }
    
    ripple_obj.html("<div></div>");
    var ripple_div = ripple_obj.find("div");
    ripple_div.css(
      {
          "display": "block",
          "background": "rgba(120, 205, 194, 0.9)",
          "border-radius": "50%",
          "-webkit-transform": "scale(0)",
          "transform": "scale(0)",
          "opacity": "1",
          "transition": "all 0.8s",
          "-webkit-transition": "all 0.8s",
          "-moz-transition": "all 0.8s",
          "-o-transition": "all 0.8s",
          "z-index": "1",
          "overflow": "hidden",
          "pointer-events": "none"
      });
    var R = parseInt(ripple_obj.outerWidth())/2;/*默認半徑為ripple-wrapper寬*/
    if (parseInt(ripple_obj.outerWidth()) < parseInt(ripple_obj.outerHeight())) {
        R = parseInt(ripple_obj.outerHeight())/2;/*如果高度大于寬半徑為ripp，le-wrapper高*/
    }
    ripple_div.css({
        "width": (R * 2) + "px",
        "height": (R * 2) + "px",
        "top": (event.pageY - ripple_obj.offset().top - R) + 'px',
        "left": (event.pageX - ripple_obj.offset().left - R) + 'px',
        "transform": "scale(1)",
        "-webkit-transform": "scale(1)",
        "opacity": "0"
    });
    
}