javascript实现数字随机软键盘

来源：互联网发布：change软件编辑：程序博客网时间：2024/05/08 16:14

新建一个softkeyboard.aspx

[html] view plaincopyprint?

<%@ 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 />
<input id="useKey" type="button" value="使用键盘输入" onclick="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="删除" onclick="setpassvalue();" ondblclick="setpassvalue();" style="width: 52px">
<input name="button12" type="button" onclick="OverInput();" value="确定" style="width: 52px"><br />
</form>
</div>
<input maxlength="6" size="20" type="password" name="password" ondblclick="password1=this;showkeyboard();"
onclick="password1=this;showkeyboard();" title="请填写密码" />
<input type="button" value="显示" onclick="alert(password1.value);" />
</body>
</html>

<%@ 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="使用键盘输入" onclick="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="删 除" onclick="setpassvalue();" ondblclick="setpassvalue();" style="width: 52px">            <input name="button12" type="button" onclick="OverInput();" value="确 定" style="width: 52px"><br />        </form>    </div>    <input maxlength="6" size="20" type="password" name="password" ondblclick="password1=this;showkeyboard();"        onclick="password1=this;showkeyboard();" title="请填写密码" />        <input type="button" value="显示" onclick="alert(password1.value);" /></body></html>

效果如图：