JS软键盘密码输入器

最新推荐文章于 2022-05-05 23:01:05 发布
最新推荐文章于 2022-05-05 23:01:05 发布
阅读量934 收藏
点赞数
文章标签： button function autocomplete input border action 
 <html>
<head>
<title>JS软键盘密码输入器</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT language=JavaScript>
window.οnlοad=function(){password1=null;initCalc();}
var CapsLockValue=0;
var check;
self.onError=null;
currentX = currentY = 0;  
whichIt = null;           
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
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;

}

 

document.write("<DIV align=center id=\"softkeyboard\" name=\"softkeyboard\" style=\"position:absolute; left:0px; top:0px; width:500px; z-index:180;display:none\"><table id=\"CalcTable\" width=\"\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"\"><FORM id=Calc name=Calc action=\"\" method=post autocomplete=\"off\"><tr><td title=\"尊敬的客户：为了保证网上交易安全,建议使用密码输入器输入密码!\" align=\"right\" valign=\"middle\" bgcolor=\"\" style=\"cursor: default;height:30\"><INPUT type=hidden value=\"\" name=password><INPUT type=hidden value=ok name=action2> <font style=\"font-size:13px;\">在远方仿建行</font>  密码输入器                      <INPUT style=\"width:100px;height:20px;background-color:#54BAF1;\" type=button value=\"使用键盘输入\" bgtype=\"1\" οnclick=\"password1.readOnly=0;password1.focus();softkeyboard.style.display='none';password1.value='';\"><span style=\"width:2px;\"></span></td></tr><tr align=\"center\"><td align=\"center\" bgcolor=\"#FFFFFF\"><table align=\"center\" width=\"%\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\"><tr align=\"left\" valign=\"middle\"><td><input type=button value=\" ~ \"></td><td><input type=button value=\" ! \"></td><td><input type=button  value=\" @ \"></td><td><input type=button value=\" # \"></td><td><input type=button value=\" $ \"></td><td><input type=button value=\" % \"></td><td><input type=button value=\" ^ \"></td><td><input type=button value=\" & \"></td><td><input type=button value=\" * \"></td><td><input type=button value=\" ( \"></td><td><input type=button value=\" ) \"></td><td><input type=button value=\" _ \"></td><td><input type=button value=\" + \"></td><td><input type=button value=\" | \"></td><td colspan=\"1\" rowspan=\"2\"><input name=\"button10\" type=button value=\" 退格\" οnclick=\"setpassvalue();\"  onDblClick=\"setpassvalue();\" style=\"width:100px;height:42px\"></td></tr><tr align=\"left\" valign=\"middle\"><td><input type=button value=\" ` \"></td><td><input type=button value=\" 1 \"></td><td><input type=button value=\" 2 \"></td><td><input type=button value=\" 3 \"></td><td><input type=button value=\" 4 \"></td><td><input type=button value=\" 5 \"></td><td><input type=button value=\" 6 \"></td><td><input type=button value=\" 7 \"></td><td><input type=button value=\" 8 \"></td><td><input type=button value=\" 9 \"></td><td><input name=\"button6\" type=button value=\" 0 \"></td><td><input type=button value=\" - \"></td><td><input type=button value=\" = \"></td><td><input type=button value=\" \\ \"></td><td></td></tr><tr align=\"left\" valign=\"middle\"><td><input type=button value=\" q \"></td><td><input type=button value=\" w \"></td><td><input type=button value=\" e \"></td><td><input type=button value=\" r \"></td><td><input type=button value=\" t \"></td><td><input type=button value=\" y \"></td><td><input type=button value=\" u \"></td><td><input type=button value=\" i \"></td><td><input type=button value=\" o \"></td><td><input name=\"button8\" type=button value=\" p \"></td><td><input name=\"button9\" type=button value=\" { \"></td><td><input type=button value=\" } \"></td><td><input type=button value=\" [ \"></td><td><input type=button value=\" ] \"></td><td><input name=\"button9\" type=button onClick=\"capsLockText();setCapsLock();\" onDblClick=\"capsLockText();setCapsLock();\" value=\"切换大/小写\" style=\"width:100px;\"></td></tr><tr align=\"left\" valign=\"middle\"><td><input type=button value=\" a \"></td><td><input type=button value=\" s \"></td><td><input type=button value=\" d \"></td><td><input type=button value=\" f \"></td><td><input type=button value=\" g \"></td><td><input type=button value=\" h \"></td><td><input type=button value=\" j \"></td><td><input name=\"button3\" type=button value=\" k \"></td><td><input name=\"button4\" type=button value=\" l \"></td><td><input name=\"button5\" type=button value=\" : \"></td><td><input name=\"button7\" type=button value=\" " \"></td><td><input type=button value=\" ; \"></td><td><input type=button value=\" ' \"></td><td rowspan=\"2\" colspan=\"2\"><input name=\"button12\" type=button οnclick=\"OverInput();\" value=\"   确定  \" style=\"width:130px;height:42\"></td></tr><tr align=\"left\" valign=\"middle\"><td><input name=\"button2\" type=button value=\" z \"></td><td><input type=button value=\" x \"></td><td><input type=button value=\" c \"></td><td><input type=button value=\" v \"></td><td><input type=button value=\" b \"></td><td><input type=button value=\" n \"></td><td><input type=button value=\" m \"></td><td><input type=button value=\" < \"></td><td><input type=button value=\" > \"></td><td><input type=button value=\" ? \"></td><td><input type=button value=\" , \"></td><td><input type=button value=\" . \"></td><td><input type=button value=\" / \"></td></tr></table></td></FORM></tr></table></DIV>")

function addValue(newValue)

{
if (CapsLockValue==0){
var str=Calc.password.value;
if(str.length<password1.maxLength){
Calc.password.value += newValue;}   
if(str.length<=password1.maxLength){
password1.value=Calc.password.value;}
}else{

var str=Calc.password.value;
if(str.length<password1.maxLength){
Calc.password.value += newValue.toUpperCase();}
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;
softkeyboard.style.display="none";
Calc.password.value="";
password1.readOnly=1;
}

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";
password1.readOnly=1;
password1.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";
Calc.elements[i].style.borderTopColor= "#118ACC";
Calc.elements[i].style.borderRightColor= "#118ACC";
Calc.elements[i].style.borderBottomColor= "#118ACC";
Calc.elements[i].style.borderLeftColor= "#118ACC";
Calc.elements[i].style.backgroundColor="#ADDEF8";
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].οnclick=function(){var thisButtonValue=this.value;thisButtonValue=thisButtonValue.trim();addValue(thisButtonValue);}

Calc.elements[i].οndblclick=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 char=Calc.elements[i].value;
var char=char.trim();
if(Calc.elements[i].type=="button"&&char>="a"&&char<="z"&&char.length==1){
Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)-32)+" ";}
}}else{
for(var i=0;i<Calc.elements.length;i++){
var char=Calc.elements[i].value;
var char=char.trim()
if(Calc.elements[i].type=="button"&&char>="A"&&char<="Z"&&char.length==1){
Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)+32)+" ";}}}
capsLockFlag=!capsLockFlag;
}
</SCRIPT>
</head>

<body>
<BR>
<p align="center">
<BR>
</p>
<center>
<table cellspacing="2" width="200" border="0">
 <tr>
  <td nowrap>请输入帐号：</td>
  <td nowrap colspan="3">
  <input class="textlogin" title="证件号码" maxlength="20" name="USERID" minlength="1"></td>
 </tr>
 <tr>
  <td nowrap>请输入密码：</td>
  <td nowrap colspan="3">
  <input class="textlogin" id="LOGPASS" οnkeydοwn="Calc.password.value=this.value" title="登录密码" οnclick="password1=this;showkeyboard();this.readOnly=1;Calc.password.value=''" readonly type="text" maxlength="12" οnchange="Calc.password.value=this.value" name="LOGPASS" minlength="6"></td>
 </tr>
</table>
</center>
</body>
</html>


 

luckystar2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 键盘码
weixin_52767086的博客
01-03 315
keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 = Shift_L keycode 17 = Control_L keycode 18 = Alt_L keycode 19 = Pause keycode 20 = Caps_Lock keycode 27 = Escape Escape keycode 32 = space space keycode 3
一款JS版软键盘密码输入器
03-20
NULL 博文链接：https://zhao103804.iteye.com/blog/797418
网页输入虚拟键盘软键盘js插件
qq_44884082的博客
10-20 1823
在网页上出现一个虚拟的键盘是不是很酷 我们看下效果哦 看到这里是否心动了呢 我们先看下架包结构 下面是大家所关心的咯 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
css 输密码键盘,一款不错的键盘密码输入js程序
weixin_32524219的博客
08-03 222
keyword.js//定义当前是否大写的状态window.onload=function(){password1=null;initCalc();}varCapsLockValue=0;varcheck;functionsetVariables(){tablewidth=630;//logowidth,inpixelstableheight=20;//logoheig...
手机端密码键盘（weiKeyBoard.js）
伟哥威武的专栏
02-02 3423
背景 公司最近项目上要做手机端支付，支付时需要使用自定义键盘。网上找了些，没找到称心如意的，看时间还算充裕就自己写了个。 功能描述 样式上与微信的密码键盘一样。 当前版本1.0。 数字位置可设定为随机。 文本控件上显示的内容可以为假值。 下面是在谷歌浏览器移动端调试模式下的截图。 下载及内容讲解 点击此处下载 直接运行包内的index.html即可。 调用方式 此插件使用面向对象的方式进行调用。 声
仿建行软键盘密码输入器特效代码
03-20
标题“仿建行软键盘密码输入器特效代码”揭示了我们即将探讨的知识点主要围绕着一个特定的软件开发项目，即构建一个模仿建设银行软键盘密码输入器的程序。这样的输入器通常用于提高网上银行或其他金融交易网站的安全...
JS版软键盘密码输入器
09-12
标题“JS版软键盘密码输入器”明确指出这是一个使用JavaScript语言编写的软键盘密码输入界面。在现代网页应用中，软键盘的实现对于移动设备或特定场景下的密码输入非常关键，它不仅提高了用户输入的便捷性，还增加了...
一款JS版软键盘密码输入器.rar
03-26
一款JS版软键盘密码输入器.rar一款JS版软键盘密码输入器.rar一款JS版软键盘密码输入器.rar一款JS版软键盘密码输入器.rar一款JS版软键盘密码输入器.rar一款JS版软键盘密码输入器.rar一款JS版软键盘密码输入器.rar一款...
软键盘（JavaScript模拟软键盘输入密码）
11-25
本文将深入探讨如何利用JavaScript来创建一个模拟软键盘，以便用户在不暴露真实物理键盘输入的情况下输入密码。 首先，我们需要理解JavaScript的基本概念。JavaScript是一种解释型的、基于原型的、动态类型的编程...
JS实现六位字符密码输入器功能
10-21
主要介绍了JS实现六位字符密码输入器功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
js 密码键盘输入器
03-11
网友提供的银行密码输入器，希望对大家有帮助！
一款用JS编写的软键盘输入密码
01-11
用JS编写的软键盘输入的密码。 界面好看，易操作，只要引进JS就可以使用
html5密码键盘
10-25
很好用哦，就是关于html5前台页面的密码键盘的实现，对密码进行加密的实现。
html5移动开发之密码键盘
04-20
支持html5网页自定义密码控件，有效解决了安全性问题
使用JS实现的可变动态密码输入键盘控件源代码
李大仁博客
08-16 2277
今天要分享的是一个简单的JavaScript编写和实现的可变动态密码输入控件，可以动态的生产数字键盘并显示，并且可以实现每次点击后密码键盘重新加载，可以手动控制隐藏和显示，手动控制刷新等功能。相信经常登陆网上银行或者某些游戏网站的朋友应该会经常看到这个控件，其实实现起来原理并不复杂，主要是通过随机生产数字，然后通过hash算法，安排数字的位置，这里用了最简单的占位算法，虽然效率比较低（o(n^2)
JS键盘码及使用方法
05-05 1536
一、JS键盘码 二、JQuery使用方法 $(document).keydown(function (event) { //Ctrl+K if ((window.event.ctrlKey) && (window.event.keyCode == 38)) { Addkuohao('zmjicontent'); } //Ctrl +.
电脑自动开机+自动输入密码
03-09 7661
背景描述： 公司要求电脑每晚关机。但每天早上要使用电脑签到。因每次启动要很长时间，经常。。。。 问题分解： 第一步：让电脑自动开机 第二步：让电脑自动输入密码登入系统 第三步：让电脑自动打开浏览器 第四步：让电脑自动打开OA签到页面 操作步骤： 第一步：让电脑自动开机 电脑重启过程中不断按下F12》进入BIOS界面》进入Power Management》Auto On ...
JavaScript - 模拟键盘输入支付密码
Max's Note
12-29 5944
JavaScript - 模拟键盘输入支付密码 Max.Bai 2016-12-29 0x00: 发生了什么事 我做自动化测试的时候，需要自动化在页面上输入这个密码，什么样子的，看下面： 有没有很像支付宝的支付密码输入框 0x01. 密码输入框后面的input 其实说到底他后面就是个input，来看下这个例子的源码什么样子的： 那
Android 输入法框架：硬键盘与软键盘解析
"Android-Hard-Soft-Key文档详细解释了Android系统中的硬键盘和软键盘，以及输入方法框架的概念。" 在Android系统中，硬键盘和软键盘是两种不同的输入方式，它们各自有其特性和应用场景。硬键盘通常指的是物理键盘...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值