您的位置：首页 > Web前端 > JavaScript

javascript实现数字随机软键盘

2013-10-26 21:58 344 查看
新建一个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 /> <!--<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>
<%@ 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>


效果如图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航