保护密码网站装备软键盘
技术与开发
网管琪琪在使用网上银行的时候，发现页面会弹出软键盘来供用户输入密码，琪琪想要是能在自己的网站密码输入栏中也加上一个软键盘，就能更好地保护自己网站用户的密码安全了。
要像网上银行那样在输入密码时自动弹出软键盘，我们可以设计一个软键盘插件（插件下载地址：http://www.shudoo.com/bzsoft）。首先我们要在网页上创建一个含有许多按钮的软键盘，然后为各个按钮添加相应的输入功能，最后将软件盘与指定的输入框关联起来就可以了。这样单击输入框便可以自动调出软键盘。根据相似原理，我们还可以制作出可以输入特殊字符的输入器等。
小知识：
如何获取和操作网页上的多个对象
有时候，我们需要操作网页上的多个对象，如改变它们的某一属性，为它们添加某一事件等。利用JavaScript程序我们可以轻松完成对象集的获取和操作。获取网页上的对象集：es=document.all || document.layers；获取Form中的对象集：es=document.form.elements；对象集中的对象属性：es[i]. attribute；为对象集中的对象添加单击事件：es[i].onclick=function（）{}。
第一步：添加软键盘按钮
新建一个网页，在网页的
之间添加一个Div，在Div中添加相应的Button作为软键盘的按钮（代码下载地址：http://www.shudoo.com/bzsoft）。第二步：功能化软键盘按钮
按钮添加好后，我们要做的就是为软键盘的各个按钮添加相应的功能，用于输入字符的按钮我们可以统一添加输入功能，而“退格”、“大小写切换”、输入完毕后的“确定”按钮之类的特殊按钮则需要单独添加对应的功能。在
之间输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：function inputWords（v，word）{//字符输入
v.value+=word;
}
function wordsBK（v）{
var l=v.value.length;
v.value=l==0？' ':v.value.substr（0，l-1）;//退格
}
function setCapsLock（）{//字母大小写
var f=document.SKBForm;
var v=f.SKBF_CLock;
v.alt=v.alt=='大写'？'小写':'大写';
for（var i=f.elements.length-1;i>=0;i--）{
if（f.elements[i].type=='button' && Jtrim（f.elements[i].value）.toLowerCase（）>='a' && Jtrim（f.elements[i].value）.toLowerCase（）<='z' ）{
f.elements[i].value=v.alt=='小写'？" "+Jtrim（f.elements[i].value）.toLowerCase（）+" ":" "+Jtrim（f.elements[i].value）.toUpperCase（）+" ";
}
}
}
function overInput（）{//输入确定后关闭软键盘
$（'SKBdiv'）.style.display='none';
}
第三步：在输入框中显示软键盘信息
添加完软键盘的各个按钮的功能后，接下来我们就要将输入框跟软键盘关联起来了，这样可以将软键盘信息及时地录入到输入框中。在输入框标签后输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
SKBinit（$（'SKBinput'））//软键盘与输入框关联
function SKBinit（v）{//软键盘初始化
var d=$（'SKBdiv'）;
d.style.top=getAbsPoint（v）+23+'px';//设置软键盘的TOP值
d.style.left=getAbsPoint（v，'x'）+'px';//设置软键盘的LEFT值
v.onclick=function（）{callSoftKB（）;}//添加单击事件
var f=document.SKBForm;
for（var i=f.elements.length-1;i>=0;i--）{
if（f.elements[i].type=='button'）{
if（f.elements[i].name=='SKBF_tg' || f.elements[i].name=='SKBF_CLock' || f.elements[i].name=='SKBF_OK'）{
f.elements[i].onclick=f.elements[i].name=='SKBF_tg'?function（）{wordsBK（v）;}:f.elements[i].name=='SKBF_CLock'？function（）{setCapsLock（）;}:function（）{overInput（）;};//为特殊按键添加相关单击事件
}
else{
f.elements[i].onclick=function（）{inputWords（v，Jtrim（this.value））;}//为非特殊键添加单击事件
编后
本文软键盘中各个按钮的位置是没有变化的，而现在的一些高级木马可以通过判断软键盘的键位顺序来窃取用户的密码，大家可以随机改变软键盘的键位顺序，这样木马就很难判断用户的输入信息了。另外，大家还可以将本文插件的代码封装成软键盘类（类的通用性比函数代码强），使插件更具有通用性。