上海园区招商办公室
联系人：梁经理
联系电话：15000456391
欢迎来电咨询，竭诚为你服务!
JavaScript高手进阶：安全键盘
为了安全考虑，很多有登录行为的网站，会对密码输入框进行保护。
本文介绍一种使用安全键盘的输入保护方式，可用于防键盘记录、防止自动点击。
效果展示
如下图，该输入框带有一个虚拟键盘。
之所以称其为“安全键盘”，是因为两点：
其一、通过点击虚拟键盘上的按键进行输入，而不需要按下真实键盘上的键位，这样就可以防止很多系统中的后台软件记录按键、窃取密码；
其二、虚拟键盘上的键位，是打乱的，并且是实时随机的，每次页面刷新、每次输入都是不同的键位。如此，可以防止自动化工具或脚本发起的自动点击输入。
功能原理
首先，对指定的输入框，不接受常规按键，而是使用通过虚拟键盘输入。其次，虚拟键盘上的键位，每次都要随机生成。
源码解析
UI部分，在页面使用div、table模拟一个键盘，如下图：
核心功能是随机键位的产生，在本例中，使用了两种方法随机生成键位，如数字部分，使用sort方法：
字母部分，使用random方法：
对于输入内容，是直接给input输入框赋值：
代码保护
为防止功能逻辑泄露，可对JavaScript代码进行保护，比如使用JShaman（JS萨满）混淆加密上面的safe_keyword函数代码。
加密后，代码成为：
这是加密了一个函数的代码。当然也可以对整体JS代码全部加密，保护效果会更好。
完整源码
以下给出完整源码，包含UI、css风格、JS源码，保存为html即可测试使用。
<html>
<head>
<style>
th,td {
border: 1px solid #ccc;
padding: 2px 0;
text-align: center;
cursor: pointer
}
div {
border: 1px solid #ccc;
float: left;
padding: 1px;
display: none;
}
</style>
</head>
<body>
<h3>安全键盘输入</h3>
<input id="input" readonly="readonly" style="width:475px; height: 80px;" onclick="hide_or_show();"/>
<br>
<div id="keyboard">
<table cellspacing="1" width="480" onclick="safe_keyword()">
<tr>
<td>~</td>
<td>!</td>
<td>@</td>
<td>#</td>
<td>$</td>
<td>%</td>
<td>^</td>
<td>&</td>
<td>*</td>
<td>(</td>
<td>)</td>
<td>_</td>
<td>+</td>
<td>|</td>
<td rowspan="2" width="120">退格</td>
</tr>
<tr>
<td>`</td>
<td class="num">1</td>
<td class="num">2</td>
<td class="num">3</td>
<td class="num">4</td>
<td class="num">5</td>
<td class="num">6</td>
<td class="num">7</td>
<td class="num">8</td>
<td class="num">9</td>
<td class="num">0</td>
<td>-</td>
<td>=</td>
<td>\</td>
</tr>
<tr>
<td id="safe">q</td>
<td id="safe">w</td>
<td id="safe">e</td>
<td id="safe">r</td>
<td id="safe">t</td>
<td id="safe">y</td>
<td id="safe">u</td>
<td id="safe">i</td>
<td id="safe">o</td>
<td id="safe">p</td>
<td>{</td>
<td>}</td>
<td>[</td>
<td>]</td>
<td colspan="2">切换大/小写</td>
</tr>
<tr>
<td id="safe">a</td>
<td id="safe">s</td>
<td id="safe">d</td>
<td id="safe">f</td>
<td id="safe">g</td>
<td id="safe">h</td>
<td id="safe">j</td>
<td id="safe">k</td>
<td id="safe">l</td>
<td>:</td>
<td>"</td>
<td>;</td>
<td>'</td>
<td colspan="3" rowspan="3">ENTER</td>
</tr>
<tr>
<td id="safe">z</td>
<td id="safe">x</td>
<td id="safe">c</td>
<td id="safe">v</td>
<td id="safe">b</td>
<td id="safe">n</td>
<td id="safe">m</td>
<td>
</td>
<td>></td>
<td>?</td>
<td>,</td>
<td>.</td>
<td>/</td>
</tr>
</table>
</div>
<script>
var htmlCode = {
"&": "&",
'"': "\"",
"<": "<",
">": ">",
}
//安全输入
function safe_keyword() {
//输入框
var input = document.getElementById("input");
var e = window.event || test.caller.arguments[0];
var el = e.target || e.srcElement;
if(el.tagName.toLowerCase() == "td" && el.rowSpan <= 1 && el.colSpan <= 1) {
var str = el.innerHTML;
str = htmlCode[str] || str;
input.value += str;
}
if(el.innerHTML == "退格") {
input.value = input.value.slice(0, -1);
}
if(el.innerHTML == "切换大/小写") {
var els = document.getElementsByTagName("td");
for(var i = 0, l = els.length; i < l; i++) {
var str = els[i].innerHTML;
if(/^[a-z]$/.test(str)) els[i].innerHTML = str.toUpperCase();
if(/^[A-Z]$/.test(str)) els[i].innerHTML = str.toLowerCase();
}
}
//按下回车时隐藏安全键盘
if(el.innerHTML == "ENTER") {
hide_or_show();
}
}
//显示或隐藏键盘
function hide_or_show() {
var el = document.getElementById("keyboard");
if(el.offsetWidth > 0) el.style.display = "none";
else {
el.style.display = "block";
random_numbers();
random_letters();
}
}
//随机字母键位
function random_letters() {
//字符集
var all_keywords = [];
for(k=65; k<91; k++){
all_keywords.push(String.fromCharCode(k).toLowerCase());
}
//td元素，即各键位
var els = document.getElementsByTagName("td");
//遍历td元素
for(i=0; i<els.length; i++) {
//键位上显示的内容，即各字母
var str = els[i].innerHTML;
//随机字母
var rnd_key = parseInt( all_keywords.length * Math.random() );
if(els[i].id == "safe"){
els[i].innerHTML = all_keywords[rnd_key];
//使用后删除
delete all_keywords[rnd_key];
all_keywords.splice(rnd_key,1);
}
}
}
//随机数字键位
function random_numbers() {
//随机排序数字
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].sort(function() {
return Math.random() > 0.5 ? 1 : -1;
});
//取得所有键位
var els = document.getElementsByTagName("td");
for(var i = 0, j = 0, l = els.length; i < l; i++) {
//键位上的字符
var str = els[i].innerHTML;
//用正则表达式判断是不是数字键位，并赋新的随机值
if(/^\d$/.test(str)) els[i].innerHTML = arr[j++];
}
}
</script>
</body>
</html>
如若转载，请注明出处：https://www.dhuoke.com/8530.html
相关推荐
-
前滩办公室前滩中心(办公)项目简介
前滩办公室前滩中心(办公)项目位于前滩，地理位置优越，是一个集办公、商务、会议为一体的现代化商务中心。项目致力于提供高品质的办公环境和全方位商务服务，满足各类企业的办公需求，为企业发展提供有力支撑。前滩办公室前滩中心(办公)项目所在建筑物外观设计时尚独特，内部装修精美豪华，充满现代气息。整个办公区域
-
前滩写字楼中信泰富大厦招租信息
前滩写字楼中信泰富大厦招租信息一、地理位置优越中信泰富大厦位于前滩地区，地理位置优越。周边交通便利，临近地铁站和公交站，便于员工和客户的出行。该写字楼所处的前滩地区是上海市核心商务区域，周边商业氛围浓厚，基础设施完备，为企业提供良好的商务环境。二、租金合理中信泰
-
三极管导通条件（二极管导通条件是）
该内容转载自河科大牛老师 1、三极管的结构 当在一块半导体基片上的三个区域分别掺入不同杂质形成NPN型结构或者PNP结构，并在每个区域引出一个管脚时，就构成了NPN型三极管和PNP…
-
张江创业源商业中心招商信息
1. 张江创业源商业中心 — 实力打造创业平台 位于上海张江高科技园区的张江创业源商业中心，是一个专注于提供创业和办公场所的综合商业项目。以其良好的地理位置和卓越的服务品质，为企业…
-
张江创新园租赁中心
1. 张江创新园租赁中心：开启创新之门 张江创新园租赁中心位于上海张江高科技园区，坐落于中国科技创新的核心区域。该中心是为满足企业创新发展需求而专门打造的一站式服务平台。无论是初创…
-
百度推广多少钱一个月,收费标准吗,怎么做（做百度推广多少钱一个月）
缪丽伟跟客户沟通网络推广时，客户都会抛出一个我也很难去解答的问题：百度竞价要花多少钱？？ 这个问题实在是难以回答，就跟吃一顿饭要多少钱一样。一个人在路边摊吃个炒面10元；10个人吃…
-
星纪元招租信息
1. 引言：星纪元写字楼，打造商业新纪元 位于上海市中心的星纪元写字楼，是一座现代化、智能化的多功能商务建筑。作为上海新兴的商业地标，星纪元为租户提供了一流的办公环境和丰富的配套设…
-
浦东办公室前滩时代广场项目招租
浦东办公室前滩时代广场项目招租——尊贵商业核心地段，共创商业繁荣！位于浦东尊贵商业核心地段的前滩时代广场，长期招租办公室，旨在共同打造一个商业繁荣的平台。我们坚信，一个优雅的办公环境、便捷的交通网络和完善的商业配套服务是
-
火炬之光2异域行者技能加点方法分享（火炬之光2异域人技能）
在2.4版本暴雪加强了圣火光环后，圣骑士的开荒体验得到了巨幅提升，而同样得到加强的天堂之拳使得圣骑士到达地狱难度之后只要稍作修炼，就能轻松4分左右速刷混沌避难所（俗称超市）这一综合…
-
澄天伟业商务楼招商联系人
1. 澄天伟业商务楼——打造您的商业王国 澄天伟业商务楼是位于上海市中心繁华地段的一栋现代化写字楼，以其卓越的地理位置和高品质的办公环境吸引着各类企业和机构的关注。我们专注于为客户…