当前位置: article > 正文
javascript实现数字随机软键盘_js 随机数字键盘

作者：2023面试高手 | 2024-02-18 09:00:27
踩
js 随机数字键盘
新建一个softkeyboard.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="softkeyboard.aspx.cs" Inherits="softkeyboard" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>随机数字软键盘</title>
<script>
    window.onload = function () {
        password1 = null;
        initCalc();
    }
    var password1;
    var checkSoftKey;
 
    function addValue(newValue) {
        var str = Calc.password.value;
        if (str.length < password1.maxLength) {
            Calc.password.value += newValue;
        }
        if (str.length <= password1.maxLength) {
            password1.value = Calc.password.value;
        } 
    }
 
    function setpassvalue() {
        var longnum = Calc.password.value.length;
        var num
        num = Calc.password.value.substr(0, longnum - 1);
        Calc.password.value = num;
        var str = Calc.password.value;
        password1.value = Calc.password.value;
    }
 
    function OverInput() {
        var str = Calc.password.value;
        password1.value = Calc.password.value;
        closekeyboard();
        Calc.password.value = "";
        password1.readOnly = 1;
    }
 
    function closekeyboard(theForm) {
        softkeyboard.style.display = "none";
    }
 
    function showkeyboard() {
        randomNumberButton();
        var th = password1;
        var ttop = th.offsetTop;
        var thei = th.clientHeight;
        var tleft = th.offsetLeft;
        while (th = th.offsetParent) { ttop += th.offsetTop; tleft += th.offsetLeft; }
        softkeyboard.style.top = ttop + "px";
        softkeyboard.style.left = Math.max(tleft + 160, 0) + "px";
        softkeyboard.style.display = "block";
        password1.readOnly = 1;
        password1.blur();
        document.all.useKey.focus();
    }
 
    function initCalc() {
        for (var i = 0; i < Calc.elements.length; i++) {
            if (Calc.elements[i].type == "button") {
                var str1 = Calc.elements[i].value;
                str1 = str1.trim();
                var thisButtonValue = Calc.elements[i].value;
                thisButtonValue = thisButtonValue.trim();
                if (thisButtonValue.length == 1) {
                    Calc.elements[i].ondblclick = Calc.elements[i].onclick = function () {
                        var thisButtonValue = this.value;
                        thisButtonValue = thisButtonValue.trim();
                        addValue(thisButtonValue);
                    } 
                } 
            } 
        } 
    }
 
    String.prototype.trim = function () {
        return this.replace(/(^\s*)|(\s*$)/g, "");
    }
 
    function randomNumberButton() {/*随机数字*/
        var randomNum;
        for (var i = 0; i < 21; i++) {
            randomNum = parseInt(Math.random() * 10);
            var tmp = Calc.button_number0.value;
            Calc.button_number0.value = eval("Calc.button_number" + randomNum + ".value");
            eval("Calc.button_number" + randomNum + ".value=tmp");
        } 
    }
</script>
</head>
<body>
    <div id="softkeyboard" name="softkeyboard" style="position: absolute; left: 142px;
        top: 23px; z-index: 99; display: none; background-color: #99cc99; width: 178px;text-align: center;">
        <form id="Calc" name="Calc" action="" method="post" autocomplete="off">
            <input type="hidden" value="" name="password">
            <input type="hidden" value="ok" name="action2">
            <br />
            <!--<span style="font-weight: bold; font-size: 13px; color: #075BC3">密码输入器</span>-->
            <input id="useKey" type="button" value="使用键盘输入" οnclick="password1.readOnly=0;password1.focus();closekeyboard();password1.value='';" style="width:172px;">
            <input type="button" name="button_number1" value="  1  ">
            <input type="button" name="button_number2" value="  2  ">
            <input type="button" name="button_number3" value="  3  "><br />
            <input type="button" name="button_number4" value="  4  ">
            <input type="button" name="button_number5" value="  5  ">
            <input type="button" name="button_number6" value="  6  "><br />
            <input type="button" name="button_number7" value="  7  ">
            <input type="button" name="button_number8" value="  8  ">
            <input type="button" name="button_number9" value="  9  "><br />
            <input type="button" name="button_number0" value="  0  ">
            <input name="button10" type="button" value="删 除" οnclick="setpassvalue();" οndblclick="setpassvalue();" style="width: 52px">
            <input name="button12" type="button" οnclick="OverInput();" value="确 定" style="width: 52px"><br />
        </form>
    </div>
    <input maxlength="6" size="20" type="password" name="password" οndblclick="password1=this;showkeyboard();"
        οnclick="password1=this;showkeyboard();" title="请填写密码" />
        <input type="button" value="显示" οnclick="alert(password1.value);" />
</body>
</html>
效果如图：
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/106799