仿建行网银登陆软键盘
第一次在博客园上发贴子，就以去年自己无聊写的一个软键盘作为处女贴吧。功能都是模仿的，可能部分功能不全请大家见谅。
直接上代码。
HTML代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿网银登陆软键盘</title>
</head>
<body>
<div align="center" id="text" >
<table>
<tr>
<td>账 号：</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>密 码：</td>
<td><input type="password" name="pas" id="pas" /><input type="button" value="使用软键盘" onclick="createKeyBoard()"/></td>
</tr>
</table>
</div>
CSS代码
#divone{
width: 473px; /* 背景色设为蓝色 */*/
width: 460px\9; /* 背景色设为灰色。仅IE6与IE7可执行 */
width: 460px\0; /* 背景色设为蓝色，仅IE8认可 */
height:150px;
cursor:pointer;
}
.newTable tr td{
padding:1px 0 1px 0;
}
.blue{
background-color:#09F;
border:0px;height:20px;
}
.forSpan{
margin:0 50px 0 50px;
color:#FFF;
}
#jianpan{
border:#0FC;
width:60px;
height:20px;
}
.litteButton{
margin:0px 0px 0px 2px;
width:26px;
width: 26px\9; /* 背景色设为灰色。仅IE6与IE7可执行 */
width: 26px\0;
height:20px;
border:1px solid #FF0;
cursor:pointer;
}
.bigButton{
margin:1px 1px 1px 1px;
border:1px #FF0 solid;
cursor:pointer;width:98%;
height:44px;
margin:0 1px 0 1px;
}
#firstId{
width:76%;
width: 78%\9; /* 背景色设为灰色。仅IE6与IE7可执行 */
width: 78%\0;
height:1px;
}
#thirdId{
width:19%;
width: 17%\9; /* 背景色设为灰色。仅IE6与IE7可执行 */
width: 17%\0;
}
#qiehuan{
margin:0px 0px 0px 2px;
height:20px;
border:1px solid #FF0;
cursor:pointer;
}
JavaScript
function KeyBoard() {
this.tag = document.getElementsByName("pas");
this.passVal;
this.create = function() {
var tags = document.getElementById("text");
var newDiv = document.createElement("div");
var postion = this.getElementPos(this.tag[0]);
newDiv.style.position = "absolute";
newDiv.style.left = postion[0];
newDiv.style.top = postion[1];
newDiv.id = "divone";
tags.appendChild(newDiv);
var newTable = document.createElement("table");
newTable.width = '100%';
newTable.className = "newTable";
var tr = document.createElement("tr");
var td = document.createElement("td");
td.id = "firstId";
tr.appendChild(td);
td = document.createElement("td");
td.width = "5%";
tr.appendChild(td);
td = document.createElement("td");
td.id = "thirdId";
td.height = "1px";
tr.appendChild(td);
newTable.appendChild(tr);
for(var i = 0; i <6 ; i ++) {
this.addRow(newTable,i);
}
newDiv.appendChild(newTable);
newDiv.outerHTML = newDiv.outerHTML;
}
this.whatBrowser = function() {
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(navigator.userAgent.indexOf("Opera")>0){
return "Opera";
}
if(navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
if(navigator.userAgent.indexOf("Camino")>0){
return "Camino";
}
if(navigator.userAgent.indexOf("Gecko")>0){
return "Gecko";
}
}
this.toDisable = function() {
var tag = document.getElementById("pas");
tag.readOnly = true;
tag.value = "";
}
//创建行函数
this.addRow = function(newTable,sqnm) {
var tr = document.createElement("tr");
var td, spTd, input, span;
var tdArray = new Array();
var sLen, sBind;
var reg = /[^\u4e00-\u9fa5]/;//中文判断
tr.className = "blue";
td = document.createElement("td");
switch(sqnm) {
case 0:
td = document.createElement("td");
td.colSpan = 3;
td.align = "center";
span = document.createElement("span");
span.innerHTML = "欢迎使用软键盘。";
span.className = "forSpan";
td.appendChild(span);
input = document.createElement("input");
input.type = "button";
input.id = "jianpan";
input.value = "使用键盘";
td.appendChild(input);
tr.appendChild(td);
break;
case 1:
td.colSpan = 2;
tdArray = Array("~","!","@","#","$","%","^","&","*","(",")","_","+","|","退格");
break;
case 2:
td.colSpan = 2;
tdArray = Array("\'","1","2","3","4","5","6","7","8","9","0","-","=","\\");
break;
case 3:
td.colSpan = 3;
tdArray = Array("q","w","e","r","t","y","u","i","o","p","{","}","[","]","切换大\/小写");
break;
case 4:
tdArray = Array("a","s","d","f","g","h","j","k","l",":","\"",":","\'","确定");
break;
case 5:
tdArray = Array("z","x","c","v","b","n","m","<",">","?",",",".","/");
break;
}
sLen = tdArray.length;
if(0!=sLen) {
for(var i = 0; i < sLen; i++) {
if(reg.exec(tdArray[i])) {
if(0 == tdArray[i].indexOf("切")) {
input = this.createInput(tdArray[i]);
if("MSIE" == this.whatBrowser()) {
input.style.width = "76px";
}
else {
input.style.width = "87px";
}
input.className = "";
input.id = "qiehuan";
td.appendChild(input);
}
else {
input = this.createInput(tdArray[i]);
td.height = "20px";
td.appendChild(input);
}
}
else {
if(0 == tdArray[i].indexOf("退")) {
spTd = document.createElement("td");
spTd.rowSpan = 2;
input = this.createInput(tdArray[i]);
input.className = "bigButton"
input.style.height = "44px";
input.style.width = "98%";
input.id = "back";
spTd.appendChild(input);
}
else if(0 == tdArray[i].indexOf("确")){
spTd = document.createElement("td");
spTd.rowSpan = 2;
spTd.colSpan = 2;
input = this.createInput(tdArray[i]);
input.className = "bigButton";
input.style.width = "98%";
spTd.appendChild(input);
}
}
}
tr.appendChild(td);
if(undefined!=spTd) {
tr.appendChild(spTd);
}
}
newTable.appendChild(tr);
//添加绑定事件
}
this.addClick = function() {
var tags = this.getElementsByClassName("litteButton");
var i = tags.length;
for(var j = 0; j<i; j++) {
(function(tag,type){
if('MSIE'==type) {
tag.attachEvent("onclick",function(){change(tag.value)});
}
else {
tag.addEventListener("click",function(){change(tag.value)},false);
}
})(tags[j],this.whatBrowser());
}
var backTag = document.getElementById("back");
this.jianRong(backTag,backVal);
var qieTag = document.getElementById("qiehuan");
this.jianRong(qieTag,qieHuan);
var jianTag = document.getElementById("jianpan");
this.jianRong(jianTag,jianPan);
}
this.jianRong = function(tag,fun) {
if('MSIE'==this.whatBrowser()) {
tag.attachEvent("onclick",fun);
}
else {
tag.addEventListener("click",fun,false);
}
}
this.createInput = function(val) {
var input;
input = document.createElement("input");
input.type = "button";
input.value = val;
input.style.width = "25px";
input.className = "litteButton";
return input;
}
//获取对象方法
this.getElementsByClassName = function(n) {
var classElements = [],allElements = document.getElementsByTagName('*');
for (var i=0; i< allElements.length; i++ )
{
if (allElements[i].className == n ) {
classElements[classElements.length] = allElements[i]; //某类集合
}
}
return classElements;
}
//获取对象位置
this.getElementPos = function(tag) {
var ua = navigator.userAgent.toLowerCase();
var isOpera = (ua.indexOf('opera') != -1);
var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
if (tag.parentNode === null || tag.style.display == 'none') {
return false;
}
var parent = null;
var pos = [];
var box;
if (tag.getBoundingClientRect)
{
box = tag.getBoundingClientRect();
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
pos[0] = box.left + scrollLeft + "px";
pos[1] = box.bottom +scrollTop + "px";
return pos;
}
}
}
function createKeyBoard() {
var tag = document.getElementById("divone");
if(undefined == tag) {
var s = new KeyBoard;
s.create();
s.addClick();
s.toDisable();
}
else {
return false;
}
}
function change(val) {
var tag = document.getElementById("pas");
var newVal = tag.value + val;
tag.value = newVal;
}
function backVal() {
var tag = document.getElementById("pas");
var newVal, valLen;
valLen = tag.value.length;
if(0 == valLen) {
return false;
}
else {
newVal = tag.value.substr(0,valLen - 1);
tag.value = newVal;
}
}
function qieHuan() {
var reg = /[a-z|A-Z]/;
var Reg = /[a-z]/;
var classElements = [],allElements = document.getElementsByTagName('*');
for (var i=0; i< allElements.length; i++ )
{
if (allElements[i].className == "litteButton" ) {
classElements[classElements.length] = allElements[i]; //某类集合
}
}
var val;
var i = classElements.length;
for(var j = 0; j<i; j++) {
val = classElements[j].value;
if(reg.exec(val)) {
if(!Reg.exec(val)) {
classElements[j].value = val.toLowerCase ();
}
else {
classElements[j].value = val.toUpperCase();
}
}
}
}
function jianPan() {
var tag = document.getElementById("divone");
tag.parentNode.removeChild(tag);
var tag = document.getElementById("pas");
tag.value = "";
tag.readOnly = false;
}
源代码都在这，组装后就可以直接使用。如果需要特殊的功能可自行添加。
PS:确认键的功能没有添加，所有点击后没有效果。
最终效果图：
浙公网安备 33010602011771号