js版 软键盘输入小例子

最新推荐文章于 2023-10-13 16:27:29 发布
最新推荐文章于 2023-10-13 16:27:29 发布
阅读量899 收藏
点赞数
文章标签： button input function parameters random autocomplete
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cheng_jun/article/details/5292206
版权

新建一个html网页文件，用文本编辑工具打开，将下面的大段代码拷进去，保存。用浏览器打开，点击输入框就能看到效果了！！

 


<html>
    <head>
        <title>登录</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <style type="text/css">
        <!-- .STYLE1 {
            color: #FF0000;
            font-weight: bold;
        }
        -->
        </style>
         <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
        <script type="text/javascript">
            <!--
           
            function checkspace(checkstr){
                var str = '';
                for (i = 0; i < checkstr.length; i++) {
                    str = str + ' ';
                }
                return (str == checkstr);
            }
           
            function check(){
                document.admininfo.submit();
            }
           
            //定义当前是否大写的状态
            window.onload = function(){
                inputValue1 = null;
                initCalc();
            }
            var CapsLockValue = 0;
            var check;
            function setVariables(){
                tablewidth = 630; // logo width, in pixels
                tableheight = 20; // logo height, in pixels
                if (navigator.appName == "Netscape") {
                    horz = ".left";
                    vert = ".top";
                    docStyle = "document.";
                    styleDoc = "";
                    innerW = "window.innerWidth";
                    innerH = "window.innerHeight";
                    offsetX = "window.pageXOffset";
                    offsetY = "window.pageYOffset";
                }
                else {
                    horz = ".pixelLeft";
                    vert = ".pixelTop";
                    docStyle = "";
                    styleDoc = ".style";
                    innerW = "document.body.clientWidth";
                    innerH = "document.body.clientHeight";
                    offsetX = "document.body.scrollLeft";
                    offsetY = "document.body.scrollTop";
                }
            }
           
            function checkLocation(){
                if (check) {
                    objectXY = "softkeyboard";
                    var availableX = eval(innerW);
                    var availableY = eval(innerH);
                    var currentX = eval(offsetX);
                    var currentY = eval(offsetY);
                    x = availableX - tablewidth + currentX;
                    //y=availableY-tableheight+currentY;
                    y = currentY;
                    evalMove();
                }
                setTimeout("checkLocation()", 0);
            }
           
            function evalMove(){
                eval(docStyle + objectXY + styleDoc + vert + "=" + y);
            }
           
            self.onError = null;
            currentX = currentY = 0;
            whichIt = null;
            lastScrollX = 0;
            lastScrollY = 0;
            NS = (document.layers) ? 1 : 0;
            IE = (document.all) ? 1 : 0;
            function heartBeat(){
                if (IE) {
                    diffY = document.body.scrollTop;
                    diffX = document.body.scrollLeft;
                }
                if (NS) {
                    diffY = self.pageYOffset;
                    diffX = self.pageXOffset;
                }
                if (diffY != lastScrollY) {
                    percent = .1 * (diffY - lastScrollY);
                    if (percent > 0)
                        percent = Math.ceil(percent);
                    else
                        percent = Math.floor(percent);
                    if (IE)
                        document.all.softkeyboard.style.pixelTop += percent;
                    if (NS)
                        document.softkeyboard.top += percent;
                    lastScrollY = lastScrollY + percent;
                }
                if (diffX != lastScrollX) {
                    percent = .1 * (diffX - lastScrollX);
                    if (percent > 0)
                        percent = Math.ceil(percent);
                    else
                        percent = Math.floor(percent);
                    if (IE)
                        document.all.softkeyboard.style.pixelLeft += percent;
                    if (NS)
                        document.softkeyboard.left += percent;
                    lastScrollX = lastScrollX + percent;
                }
            }
           
            function checkFocus(x, y){
                stalkerx = document.softkeyboard.pageX;
                stalkery = document.softkeyboard.pageY;
                stalkerwidth = document.softkeyboard.clip.width;
                stalkerheight = document.softkeyboard.clip.height;
                if ((x > stalkerx && x < (stalkerx + stalkerwidth)) && (y > stalkery && y < (stalkery + stalkerheight)))
                    return true;
                else
                    return false;
            }
           
            function grabIt(e){
                check = false;
                if (IE) {
                    whichIt = event.srcElement;
                    while (whichIt.id.indexOf("softkeyboard") == -1) {
                        whichIt = whichIt.parentElement;
                        if (whichIt == null) {
                            return true;
                        }
                    }
                    whichIt.style.pixelLeft = whichIt.offsetLeft;
                    whichIt.style.pixelTop = whichIt.offsetTop;
                    currentX = (event.clientX + document.body.scrollLeft);
                    currentY = (event.clientY + document.body.scrollTop);
                }
                else {
                    window.captureEvents(Event.MOUSEMOVE);
                    if (checkFocus(e.pageX, e.pageY)) {
                        whichIt = document.softkeyboard;
                        StalkerTouchedX = e.pageX - document.softkeyboard.pageX;
                        StalkerTouchedY = e.pageY - document.softkeyboard.pageY;
                    }
                }
                return true;
            }
           
            function moveIt(e){
                if (whichIt == null) {
                    return false;
                }
                if (IE) {
                    newX = (event.clientX + document.body.scrollLeft);
                    newY = (event.clientY + document.body.scrollTop);
                    distanceX = (newX - currentX);
                    distanceY = (newY - currentY);
                    currentX = newX;
                    currentY = newY;
                    whichIt.style.pixelLeft += distanceX;
                    whichIt.style.pixelTop += distanceY;
                    if (whichIt.style.pixelTop < document.body.scrollTop)
                        whichIt.style.pixelTop = document.body.scrollTop;
                    if (whichIt.style.pixelLeft < document.body.scrollLeft)
                        whichIt.style.pixelLeft = document.body.scrollLeft;
                    if (whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20)
                        whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
                    if (whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5)
                        whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
                    event.returnValue = false;
                }
                else {
                    whichIt.moveTo(e.pageX - StalkerTouchedX, e.pageY - StalkerTouchedY);
                    if (whichIt.left < 0 + self.pageXOffset)
                        whichIt.left = 0 + self.pageXOffset;
                    if (whichIt.top < 0 + self.pageYOffset)
                        whichIt.top = 0 + self.pageYOffset;
                    if ((whichIt.left + whichIt.clip.width) >= (window.innerWidth + self.pageXOffset - 17))
                        whichIt.left = ((window.innerWidth + self.pageXOffset) - whichIt.clip.width) - 17;
                    if ((whichIt.top + whichIt.clip.height) >= (window.innerHeight + self.pageYOffset - 17))
                        whichIt.top = ((window.innerHeight + self.pageYOffset) - whichIt.clip.height) - 17;
                    return false;
                }
                return false;
            }
           
            function dropIt(){
                whichIt = null;
                if (NS)
                    window.releaseEvents(Event.MOUSEMOVE);
                return true;
            }
           
            if (NS) {
                window.captureEvents(Event.MOUSEUP | Event.MOUSEDOWN);
                window.onmousedown = grabIt;
                window.onmousemove = moveIt;
                window.onmouseup = dropIt;
            }
            if (IE) {
                document.onmousedown = grabIt;
                document.onmousemove = moveIt;
                document.onmouseup = dropIt;
            }
            // if(NS || IE) action = window.setInterval("heartBeat()",1);
            document.write("<DIV align=center id=/"softkeyboard/" name=/"softkeyboard/" style=/"position:absolute; left:0px; top:0px; width:500px; z-index:180;display:none/">  ");
            document.write("<table id=/"CalcTable/" width=/"/" border=/"0/" align=/"center/" cellpadding=/"0/" cellspacing=/"0/" bgcolor=/"/"> ");
            document.write("<FORM id='Calc' name='Calc' action=/"/" method=post autocomplete=/"off/">");
            document.write("<tr>");
            document.write("<td title=/"为了保证后台登陆安全,建议使用密码输入器输入密码!/" align=/"right/" valign=/"middle/" bgcolor=/"/" style=/"cursor: default;height:30/">");
            document.write("<INPUT type=hidden value=/"/" name='inputValue'>");
            document.write("<INPUT type=hidden value=ok name=action2>");
            document.write("&nbsp&nbsp;&nbsp;密码输入器&nbsp&nbsp&nbsp&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp&nbsp;&nbsp&nbsp;");
            document.write("<INPUT style=/"width:100px;height:20px;background-color:#54BAF1;/" type=button value=/"使用键盘输入/" bgtype=/"1/" οnclick=/"inputValue1.readOnly=0;inputValue1.focus();softkeyboard.style.display='none';inputValue1.value='';/">");
           
            document.write("<span style=/"width:2px;/"></span>");
            document.write("</td></tr>");
            document.write("<tr align=/"center/">");
            document.write("<td align=/"center/" bgcolor=/"#FFFFFF/">");
            document.write("<table align=/"center/" width=/"%/" border=/"0/" cellspacing=/"1/" cellpadding=/"0/">/n");
            document.write("<tr align=/"left/" valign=/"middle/"> /n");
            document.write("<td>");
            document.write("<input type=button value=/" ~ /"></td>/n");
            document.write("<td> <input type=button value=/" ! /"></td>/n");
            document.write("<td> <input type=button  value=/" @ /"></td>/n");
            document.write("<td> <input type=button value=/" # /"></td>/n");
            document.write("<td> <input type=button value=/" $ /"></td>/n");
            document.write("<td> <input type=button value=/" % /"></td>/n");
            document.write("<td> <input type=button value=/" ^ /"></td>/n");
            document.write("<td> <input type=button value=/" & /"></td>/n");
            document.write("<td> <input type=button value=/" * /"></td>/n");
            document.write("<td> <input type=button value=/" ( /"></td>/n");
            document.write("<td> <input type=button value=/" ) /"></td>/n");
            document.write("<td> <input type=button value=/" _ /"></td>/n");
            document.write("<td> <input type=button value=/" + /"></td>/n");
            document.write("<td> <input type=button value=/" | /"></td>/n");
            document.write("<td colspan=/"1/" rowspan=/"2/">");
            document.write("<input name=/"button10/" type=button value=/" 退格/" οnclick=/"setpassvalue();/"  onDblClick=/"setpassvalue();/" style=/"width:100px;height:42px/"> /n");
            document.write("</td>/n");
            document.write("</tr>/n");
            document.write("<tr align=/"left/" valign=/"middle/"> /n");
            document.write("<td> <input type=button value=/" ` /"></td>/n");
            document.write("<td> <input type=button name='button_num1' value=/" 1 /"></td>/n");
            document.write("<td> <input type=button name='button_num2' value=/" 2 /"></td>/n");
            document.write("<td> <input type=button name='button_num3' value=/" 3 /"></td>/n");
            document.write("<td> <input type=button name='button_num4' value=/" 4 /"></td>/n");
            document.write("<td> <input type=button name='button_num5' value=/" 5 /"></td>/n");
            document.write("<td> <input type=button name='button_num6' value=/" 6 /"></td>/n");
            document.write("<td> <input type=button name='button_num7' value=/" 7 /"></td>/n");
            document.write("<td> <input type=button name='button_num8' value=/" 8 /"></td>/n");
            document.write("<td> <input type=button name='button_num9' value=/" 9 /"></td>/n");
            document.write("<td> <input type=button name='button_num0' value=/" 0 /"></td>/n");
            document.write("<td> <input type=button value=/" - /"></td>/n");
            document.write("<td> <input type=button value=/" = /"></td>/n");
            document.write("<td> <input type=button value=/" // /"></td>/n");
            document.write("<td> </td>/n");
            document.write("</tr>/n");
            document.write("<tr align=/"left/" valign=/"middle/"> /n");
            document.write("<td> <input type=button value=/" q /"></td>/n");
            document.write("<td> <input type=button value=/" w /"></td>/n");
            document.write("<td> <input type=button value=/" e /"></td>/n");
            document.write("<td> <input type=button value=/" r /"></td>/n");
            document.write("<td> <input type=button value=/" t /"></td>/n");
            document.write("<td> <input type=button value=/" y /"></td>/n");
            document.write("<td> <input type=button value=/" u /"></td>/n");
            document.write("<td> <input type=button value=/" i /"></td>/n");
            document.write("<td> <input type=button value=/" o /"></td>/n");
            document.write("<td> <input name=/"button8/" type=button value=/" p /"></td>/n");
            document.write("<td> <input name=/"button9/" type=button value=/" { /"></td>/n");
            document.write("<td> <input type=button value=/" } /"></td>/n");
            document.write("<td> <input type=button value=/" [ /"></td>/n");
            document.write("<td> <input type=button value=/" ] /"></td>/n");
            document.write("<td><input name=/"button9/" type=button onClick=/"capsLockText();setCapsLock();/"  onDblClick=/"capsLockText();setCapsLock();/" value=/"切换大/小写/" style=/"width:100px;/"></td>/n");
            document.write("</tr>/n");
            document.write("<tr align=/"left/" valign=/"middle/"> /n");
            document.write("<td> <input type=button value=/" a /"></td>/n");
            document.write("<td> <input type=button value=/" s /"></td>/n");
            document.write("<td> <input type=button value=/" d /"></td>/n");
            document.write("<td> <input type=button value=/" f /"></td>/n");
            document.write("<td> <input type=button value=/" g /"></td>/n");
            document.write("<td> <input type=button value=/" h /"></td>/n");
            document.write("<td> <input type=button value=/" j /"></td>/n");
            document.write("<td> <input name=/"button3/" type=button value=/" k /"></td>/n");
            document.write("<td> <input name=/"button4/" type=button value=/" l /"></td>/n");
            document.write("<td> <input name=/"button5/" type=button value=/" : /"></td>/n");
            document.write("<td> <input name=/"button7/" type=button value=/" &quot; /"></td>/n");
            document.write("<td> <input type=button value=/" ; /"></td>/n");
            document.write("<td> <input type=button value=/" ' /"></td>/n");
            document.write("<td rowspan=/"2/" colspan=/"2/"> <input name=/"button12/" type=button οnclick=/"OverInput();/" value=/"   确定  /" style=/"width:130px;height:42/"></td>/n");
            document.write("</tr>/n");
            document.write("<tr align=/"left/" valign=/"middle/"> /n");
            document.write("<td> <input name=/"button2/" type=button value=/" z /"></td>/n");
            document.write("<td> <input type=button value=/" x /"></td>/n");
            document.write("<td> <input type=button value=/" c /"></td>/n");
            document.write("<td> <input type=button value=/" v /"></td>/n");
            document.write("<td> <input type=button value=/" b /"></td>/n");
            document.write("<td> <input type=button value=/" n /"></td>/n");
            document.write("<td> <input type=button value=/" m /"></td>/n");
            document.write("<td> <input type=button value=/" &lt; /"></td>/n");
            document.write("<td> <input type=button value=/" &gt; /"></td>/n");
            document.write("<td> <input type=button value=/" ? /"></td>/n");
            document.write("<td> <input type=button value=/" , /"></td>/n");
            document.write("<td> <input type=button value=/" . /"></td>/n");
            document.write("<td> <input type=button value=/" / /"></td>/n");
            document.write("</tr>/n");
            document.write("</table></td>");
            document.write("</FORM>");
            document.write("</tr>");
            document.write("</table></DIV>");
            //给输入的输入框添加新值
            function addValue(newValue){
                if (CapsLockValue == 0) {
                    var str = Calc.inputValue.value;
                    if (str.length < inputValue1.maxLength) {
                        Calc.inputValue.value += newValue;
                    }
                    if (str.length <= inputValue1.maxLength) {
                        inputValue1.value = Calc.inputValue.value;
                    }
                }
                else {
                    var str = Calc.inputValue.value;
                    if (str.length < inputValue1.maxLength) {
                        Calc.inputValue.value += newValue.toUpperCase();
                    }
                    if (str.length <= inputValue1.maxLength) {
                        inputValue1.value = Calc.inputValue.value;
                    }
                }
            }
           
            //实现BackSpace键的功能
            function setpassvalue(){
                var longnum = Calc.inputValue.value.length;
                var num;
                num = Calc.inputValue.value.substr(0, longnum - 1);
                Calc.inputValue.value = num;
                var str = Calc.inputValue.value;
                inputValue1.value = Calc.inputValue.value;
            }
           
            //输入完毕
            function OverInput(){
                var str = Calc.inputValue.value;
                inputValue1.value = Calc.inputValue.value;
                softkeyboard.style.display = "none";
                Calc.inputValue.value = "";
                inputValue1.readOnly = 1;
            }
           
            //关闭软键盘
            function closekeyboard(theForm){
                softkeyboard.style.display = "none";
            }
           
            //显示软键盘
            function showkeyboard(){
                if (event.y + 140)
                    softkeyboard.style.top = event.y + document.body.scrollTop + 15;
                if ((event.x - 250) > 0) {
                    softkeyboard.style.left = event.x - 250;
                }
                else {
                    softkeyboard.style.left = 0;
                }
               
                softkeyboard.style.display = "block";
                inputValue1.readOnly = 1;
                inputValue1.blur();
            }
           
            //设置是否大写的值
            function setCapsLock(){
                if (CapsLockValue == 0) {
                    CapsLockValue = 1;
                }
                else {
                    CapsLockValue = 0;
                }
            }
           
            function setCalcborder(){
                CalcTable.style.border = "1px solid #0090FD";
            }
           
            function setHead(){
                CalcTable.cells[0].style.backgroundColor = "#7EDEFF";
            }
           
            function setCalcButtonBg(){
                for (var i = 0; i < Calc.elements.length; i++) {
                    if (Calc.elements[i].type == "button" && Calc.elements[i].bgtype != "1") {
                        Calc.elements[i].style.borderTopWidth = 0
                        Calc.elements[i].style.borderRightWidth = 2
                        Calc.elements[i].style.borderBottomWidth = 2
                        Calc.elements[i].style.borderLeftWidth = 0
                        Calc.elements[i].style.borderTopStyle = "none";
                        Calc.elements[i].style.borderRightStyle = "solid";
                        Calc.elements[i].style.borderBottomStyle = "solid";
                        Calc.elements[i].style.borderLeftStyle = "none";
                        //#46AC17
                        Calc.elements[i].style.borderTopColor = "#118ACC";
                        Calc.elements[i].style.borderRightColor = "#118ACC";
                        Calc.elements[i].style.borderBottomColor = "#118ACC";
                        Calc.elements[i].style.borderLeftColor = "#118ACC";
                        //#CBF3B2
                        Calc.elements[i].style.backgroundColor = "#ADDEF8";
                       
                       
                        var str1 = Calc.elements[i].value;
                        str1 = str1.trim();
                        if (str1.length == 1) {
                        }
                       
                        var thisButtonValue = Calc.elements[i].value;
                        thisButtonValue = thisButtonValue.trim();
                        if (thisButtonValue.length == 1) {
                            Calc.elements[i].onclick = function(){
                                var thisButtonValue = this.value;
                                thisButtonValue = thisButtonValue.trim();
                                addValue(thisButtonValue);
                            }
                            Calc.elements[i].ondblclick = function(){
                                var thisButtonValue = this.value;
                                thisButtonValue = thisButtonValue.trim();
                                addValue(thisButtonValue);
                            }
                        }
                       
                    }
                }
            }
           
            function initCalc(){
                setCalcborder();
                setHead();
                setCalcButtonBg();
            }
           
            String.prototype.trim = function(){
                // 用正则表达式将前后空格
                // 用空字符串替代。
                return this.replace(/(^/s*)|(/s*$)/g, "");
            }
            var capsLockFlag;
            capsLockFlag = true;
            function capsLockText(){
                if (capsLockFlag)//改成大写
                {
                    for (var i = 0; i < Calc.elements.length; i++) {
                        var c = Calc.elements[i].value;
                        var c = c.trim();
                        if (Calc.elements[i].type == "button" && c >= "a" && char <= "z" && c.length == 1) {
                            Calc.elements[i].value = " " + String.fromCharCode(c.charCodeAt(0) - 32) + " ";
                        }
                    }
                }
                else {
                    for (var i = 0; i < Calc.elements.length; i++) {
                        var c = Calc.elements[i].value;
                        var c = c.trim();
                        if (Calc.elements[i].type == "button" && c >= "A" && c <= "Z" && c.length == 1) {
                            Calc.elements[i].value = " " + String.fromCharCode(c.charCodeAt(0) + 32) + " ";
                        }
                    }
                }
                capsLockFlag = !capsLockFlag;
            }
           
            window.onload = function(){
                inputValue1 = null;
                initCalc();
            }
           
            //用途：验证输入身份证号码是否正确
            function checkIdCard(){
                var flag = false;
                var isTrue = isTrue;
                var num = document.getElementById("idCard").value;
                num = num.toUpperCase();
                //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X。  
                if (!(/(^/d{15}$)|(^/d{17}([0-9]|X)$)/.test(num))) {
                    document.getElementById("idCardDiv").innerHTML='输入的身份证号长度不对，或者号码不符合规定！/n15位号码应全为数字，18位号码末位可以为数字或X。';
                    return false;
                }
                //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
                //下面分别分析出生日期和校验位
                var len, re;
                len = num.length;
                if (len == 15) {
                    re = new RegExp(/^(/d{6})(/d{2})(/d{2})(/d{2})(/d{3})$/);
                    var arrSplit = num.match(re);
                   
                    //检查生日日期是否正确
                    var dtmBirth = new Date('19' + arrSplit[2] + '/' + arrSplit[3] + '/' + arrSplit[4]);
                    var bGoodDay;
                    bGoodDay = (dtmBirth.getYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
                    if (!bGoodDay) {
                        document.getElementById("idCardDiv").innerHTML='输入的身份证号里出生日期不对！';
                        return false;
                    }
                    else {
                        //将15位身份证转成18位
                        //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
                        var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
                        var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
                        var nTemp = 0, i;
                        num = num.substr(0, 6) + '19' + num.substr(6, num.length - 6);
                        for (i = 0; i < 17; i++) {
                            nTemp += num.substr(i, 1) * arrInt[i];
                        }
                        num += arrCh[nTemp % 11];
                        flag = true;
                    }
                }
                if (len == 18) {
                    re = new RegExp(/^(/d{6})(/d{4})(/d{2})(/d{2})(/d{3})([0-9]|X)$/);
                    var arrSplit = num.match(re);
                   
                    //检查生日日期是否正确
                    var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]);
                    var bGoodDay;
                    bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
                    if (!bGoodDay) {
                        document.getElementById("idCardDiv").innerHTML='输入的身份证号里出生日期不对！';
                        return false;
                    }
                    else {
                        //检验18位身份证的校验码是否正确。
                        //校验位按照ISO 7064:1983.MOD 11-2的规定生成，X可以认为是数字10。
                        var valnum;
                        var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
                        var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
                        var nTemp = 0, i;
                        for (i = 0; i < 17; i++) {
                            nTemp += num.substr(i, 1) * arrInt[i];
                        }
                        valnum = arrCh[nTemp % 11];
                        if (valnum != num.substr(17, 1)) {
                            document.getElementById("idCardDiv").innerHTML='18位身份证的校验码不正确！应该为：' + valnum;
                            return false;
                        }
                        flag = true;
                    }
                }
                //以下是用ajax实现服务器端验证（还有点问题）
                if(flag == true) {
                    new Ajax.Request('checkIdCard.do',{
                           method:'POST',
                           parameters:'idCard=' + num,
                           onSuccess:function(req) {
                               var txt = req.responseText;
                               if(txt == 'ok') {
                                   isTrue = true;
                               }else {
                                   isTrue = false;
                               }
                           }
                    });
                }
                return isTrue;
            }
           
            //用途：验证输入银行卡号是否正确
            function checkBankCard(){
                var regu = /^[1-9]{1}[0-9]{18}$/;
                var re = new RegExp(regu);
                var num = document.getElementById("bankCard").value;
                var flag = false;
                if (re.test(num)) {
                 //以下是用ajax实现服务器端验证（还有点问题）
                    new Ajax.Request('checkBankCard.do',{
                           method:'POST',
                           parameters:'bankCard=' + num,
                           onSuccess:function(req) {
                               var txt = req.responseText;
                               alert("****" + txt);
                               if(txt == 'ok') {
                                   flag = true;
                               }else {
                                   flag = false;
                               }
                           }
                    });
                    alert(flag);
                    return flag;
                }
                else {
                    document.getElementById("bankCardDiv").innerHTML = "您输入的银行卡号格式不正确，请按照要求正确输入！";
                    return false;
                }
            }
           
            //用途：验证输入手机号码是否正确
            function checkMobile(){
                var flag = false;
                var mobile = /^((/(/d{3}/))|(/d{3}/-))?13/d{9}|15[0-9]/d{8}$/;
                var num = document.getElementById("mobile").value;
                if (mobile.test(num)) {
                 //以下是用ajax实现服务器端验证（还有点问题）
                    new Ajax.Request('checkMobile.do',{
                           method:'POST',
                           parameters:'mobile=' + num,
                           onSuccess:function(req) {
                               var txt = req.responseText;
                               if(txt == 'ok') {
                                   flag = true;
                               }else {
                                   flag = false;
                               }
                           }
                    });
                    return true;
                }
                else {
                    document.getElementById("mobileDiv").innerHTML = "您输入的手机号码不正确，请正确输入！";
                    return false;
                }
            }
           
            //验证提交
            function checkForm(){
                if (checkMobile() & checkIdCard() & checkBankCard()) {
                    return true;
                }else {
                    return false;
                }
            }
           
            //清除提示
            function clearMessage(){
                document.getElementById("bankCardDiv").innerHTML = "";
                document.getElementById("idCardDiv").innerHTML = "";
                document.getElementById("mobileDiv").innerHTML = "";
            }
           
            //产生0~9的一个随机数数组
            function random() {
                var arr = new Array(10);
                for (var i = 0; i <= 9; i++) {
                    arr[i] = i;
                }
                for (var i = 0; i < arr.length; i++) {
                    var temp1 = Math.round(Math.random() * 9);
                    var temp2 = Math.round(Math.random() * 9);
                    var temp3;
                    if (temp1 != temp2) {
                        temp3 = arr[temp1];
                        arr[temp1] = arr[temp2];
                        arr[temp2] = temp3;
                    }
                }
                Calc.button_num0.value=" "+arr[0]+" ";
                Calc.button_num1.value=" "+arr[1]+" ";
                Calc.button_num2.value=" "+arr[2]+" ";
                Calc.button_num3.value=" "+arr[3]+" ";
                Calc.button_num4.value=" "+arr[4]+" ";
                Calc.button_num5.value=" "+arr[5]+" ";
                Calc.button_num6.value=" "+arr[6]+" ";
                Calc.button_num7.value=" "+arr[7]+" ";
                Calc.button_num8.value=" "+arr[8]+" ";
                Calc.button_num9.value=" "+arr[9]+" ";                  
            }
        </script>
    </head>
    <body>
        <br>
        <br>
        <br>
        <table width="500" height="180" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#D6D3CE" class=table-zuoyou>
            <form name="form1" method="post" action="${pageContext.request.contextPath }/login.do" οnsubmit="return checkForm();">
                <tr>
                    <td width="100" height="28" align="center" bgcolor="#FFFFFF">
                        银行卡号：
                    </td>
                    <td width="400" bgcolor="#FFFFFF" class=table-xia>
                        <input id="bankCard" name="bankCard" type="text" size="19" maxlength="19" onMouseOut="this.style.background=''" onMouseOver="this.style.background='#F9F9F9'" onFocus="this.select();" readOnly; onKeyDown="Calc.inputValue.value=this.value" onChange="Calc.inputValue.value=this.value" οnclick="clearMessage();random();inputValue1=this;showkeyboard();this.readOnly=1;Calc.inputValue.value=''">
                        (请输入19位0~9的数字)

                        <font color="red" size="2">
                            <div id="bankCardDiv">
                            </div>
                        </font>
                    </td>
                </tr>
                <tr>
                    <td width="100" height="28" align="center" bgcolor="#FFFFFF" class=table-youxia>
                        身份证号：
                    </td>
                    <td width="400" bgcolor="#FFFFFF" class=table-xia>
                        <input id="idCard" name="idCard" type="text" size="18" maxlength="18" onMouseOut="this.style.background=''" onMouseOver="this.style.background='#F9F9F9' " onFocus="this.select();" readOnly onKeyDown="Calc.inputValue.value=this.value" onChange="Calc.inputValue.value=this.value" οnclick="clearMessage();random();inputValue1=this;showkeyboard();this.readOnly=1;Calc.inputValue.value=''">
                        (请输入18位0~9的数字)
                        <font color="red" size="2">
                            <div id="idCardDiv">
                            </div>
                        </font>
                    </td>
                </tr>
                <tr>
                    <td width="100" height="28" align="center" bgcolor="#FFFFFF" class=table-youxia>
                        手&nbsp;机&nbsp;号：
                    </td>
                    <td width="400" bgcolor="#FFFFFF" class=table-xia>
                        <input id="mobile" name="mobile" type="text" size="11" maxlength="11" onMouseOut="this.style.background=''" onMouseOver="this.style.background='#F9F9F9'" onFocus="this.select();" readOnly onKeyDown="Calc.inputValue.value=this.value" onChange="Calc.inputValue.value=this.value" οnclick="clearMessage();random();inputValue1=this;showkeyboard();this.readOnly=1;Calc.inputValue.value=''">
                        (请输入11位0~9的数字)

                        <font color="red" size="2">
                            <div id="mobileDiv">
                            </div>
                        </font>
                    </td>
                </tr>
                <tr bgcolor="#FFFFFF">
                    <td colspan="2" align="center" bgcolor="#FFFFFF">
                        <input type="submit" name="Submit" value="登 录">
                    </td>
                </tr>
            </form>
        </table>
    </body>
</html>

cheng_jun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
功能强大的JS虚拟键盘
weixin_30915275的博客
02-07 481
最近做项目，我负责做网页前端，客户需要利用触摸屏进行操作，不外接鼠标键盘，但要求能录入文字，包括数字，英文，中文。思考了一下，决定用JS实现虚拟键盘。 首先上网搜索了一下JS虚拟键盘，在经过仔细筛选后，相中了VirtualKeyboard，一款功能强大的JS虚拟键盘插件。 先简单介绍一下VirtualKeyboard，它内置了100多种键盘布局和200多种输入法，9套可选皮肤方案，而且支持自建...
js实现软键盘输入
博客
08-06 1126
  //定义当前是否大写的状态 var CapsLockValue=0; var check; function setVariables() { tablewidth=630;  // logo width, in pixels tableheight=20;  // logo height, in pixels if (navigator.appName == "Netscape") {
javascript软键盘(虚拟键盘)
06-11
js软键盘，支持中英文切换、大小写、标点符号，可拖动显示位置，支持不同表单元素响应是否显示软键盘；内附demo示例。
js软键盘
q727668704的专栏
07-07 383
javascript 转载他人：效果待定 //定义当前是否大写的状态 var CapsLockValue=0; var InputControlID = ""; var UILang = "CN"; var old_onscroll_event=null; var old_onresize_event=null; function create_keyboard() { var div_st
js实现软键盘（兼容所有浏览器）
热门推荐
JAVA-JS资源共享、技术交流平台
04-17 1万+
推荐一个程序员开发、学习的好网站，www.it123.top 欢迎大家转发收藏。 效果图如下： 代码如下： <SCRIPT LANGUAGE="JavaScript"> <!-- //定义当前是否大写的状态 var CapsLockValue=0; var check; function setVariables() { tablewidth=630; ...
html实现小键盘,js之软键盘实现(源码) _javascript教程
weixin_32808905的博客
06-07 1992
鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar小键盘：http://www.cnblogs.c...
js软键盘模拟输入
happywsyhgff的博客
10-20 953
HTML代码 <div id="container"> <textarea id="write" rows="6" cols="60"></textarea> <ul id="keyboard"> <li class="symbol"><span class="off">`</span><span c...
JS实现自定义简单网页软键盘效果代码
11-22
在本文中，我们将探讨如何使用JavaScript来实现一个自定义的简单网页软键盘。这个键盘是为练习JavaScript编程技能而设计的，因此它不包含复杂的控制或高级安全特性。如果你正在寻找一个基本的解决方案来理解...
JS软键盘(javascript版本)
04-21
JavaScript软键盘是一种在网页上实现的安全输入解决方案，尤其适用于处理敏感信息，如用户密码或银行账号等。在传统的网页表单中，用户输入的内容可能会被键盘记录器截取，从而导致安全风险。JS软键盘通过在页面上...
HTML实现电脑软键盘
11-24
然而，有些情况下，我们需要在网页上实现一个电脑软键盘，这通常在移动设备或者特定应用中较为常见，因为这些设备可能没有物理键盘供用户输入数据。本教程将详细讲解如何使用HTML来实现一个基本的电脑软键盘。 首先...
js软键盘，软键盘，js模拟键盘
07-12
这是本人自己编写，自己应用的程序，实现了软键盘的功能，可以输入键盘上大部分的字符及标点符号，可以进行大小写切换，就一个js文件，调用特别简单，显示大小可以自己设定，显示位置也可以自己设定。功能很强大，在一些安全性要求很高的输入界面，都需要配置软键盘工具！
用javascript实现软键盘
03-06
页面代码，及所引用keyboard.js,keyboard.css,keyboard.png 博文链接：https://sunxboy.iteye.com/blog/183574
JS软键盘输入
04-17
JS软键盘输入,通过使用键盘输入来输入密码
JS软键盘
01-22
JS软键盘JS软键盘JS软键盘JS软键盘JS软键盘JS软键盘
Js 清新漂亮的软键盘（基于jquery插件)修改网上的一个
12-06
Js 清新漂亮的软键盘（基于jquery插件)修改网上的一个 可对选择的输入框进行录入数据，如 <input type="text" id="field1" value="双击可关闭键盘" id 必须
vue 项目软键盘回车触发搜索事件
10-14
在Vue项目中，软键盘回车触发搜索事件是常见的用户交互功能，特别是在移动应用或响应式网站中。这个功能能够提升用户体验，使用户在输入完成后能够快速执行搜索操作。下面我们将详细探讨如何实现这一功能，以及在iOS...
移动端html5页面,用js禁止弹出软键盘输入法
最新发布
gvbjhbhh的博客
10-13 2749
移动端input文本框默认的焦点行为会弹起软键盘输入法,如果直接设置readonly则聚焦不了,因为需要多次聚焦,每次都弹出键盘又影响用户体验机页面美观
JS 软键盘
u012725119的专栏
03-12 1080
keyboard.js内容 [javascript] view plaincopyprint? $(document).ready(function() {                        var $writeBox = $('#write'),          shift = false,  capslock = false;         
javascript实现软键盘
weixin_43424506的博客
10-20 1136
javascript实现软键盘效果 使用HBuilder工具使用html+加内部css样式简单实现 练习JavaScript编写 css样式代码 <style> * { padding: 0; margin: 0; } body { background: #fff; text-align:center; wi...
ios css 弹出软键盘 输入未弹起
08-06
通常情况下，当用户在输入框中点击时，操作系统会自动弹出软键盘，并将焦点设置在输入框上，以便用户可以输入内容。 但是有时候，可能会出现输入框被软键盘遮挡的情况。这通常是因为页面的布局设计不合理导致的。在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值