/** * 虚拟数字键盘方法参数说明: * 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 = '
' + '

' + '' + '使用键盘输入' + '

' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
0123
4567
89退格确定
' + '
'; /*追加到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 = ''; /*追加到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 = '
' + '' + '

' + '' + '使用键盘输入' + '

' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
0123
4567
89退格确定
' + '
'; /*追加到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('
'); $(".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("
"); 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" }); }