LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

JavaScript_jquery网页动态键盘

admin
2010年8月14日 2:19 本文热度 3972
说到软键盘,大家可能会想到window自带的屏幕键盘以及银行支付窗口的数字键盘,但是window的屏幕键盘点击某键后并不会自动刷新键盘的位置,本文介绍的网页动态键盘,当点击某键时,键盘的内容会随机刷新,这样就可以保证大家输入的安全性。
如下图所示:在线演示

下面我们看如何制作,由于我并不常用这样的键盘,所以也只是随便的写写(部分采用jquery框架,因为jq选择对象很方便),如果大家需要添加键盘,可以直接修改keys这个数组,本文主要提供思路,大家可以参考并写出更完美的键盘。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body,ul,li{padding:0px; margin:0px; list-style:none; }
body{padding:20px;}
.cls{clear:both; height:0px; line-height:0px; overflow:hidden; display:block;}

#kb_wrap{position:absolute; width:345px; border:1px solid #000; background:#333;}
#kb_list{padding:6px; color:#CCC;}
 #kb_list li{cursor:pointer; display:block; float:left; margin:1px;}
  #kb_list li a{width:18px; text-align:center; display:block; height:18px; line-height:18px; overflow:hidden; border:1px solid #666;}
  #kb_list li a:hover{border:1px solid #FFF; color:#FFF;}
</style>
<title>网页键盘</title>
</head>
<body>
<input type="text" id="nw" />
</body>
</html>
<script src="jquery.js"></script>
<script>
//定义键盘
var keys=new Array(new Array('1','1'),new Array('2','2'),new Array('3','3'),new Array('4','4'),new Array('5','5'),new Array('6','6'),new Array('7','7'),new Array('8','8'),new Array('9','9'),new Array('0','0'),new Array('a','a'),new Array('b','b'),new Array('c','c'),new Array('d','d'),new Array('e','e'),new Array('f','f'),new Array('g','g'),new Array('h','h'),new Array('i','i'),new Array('j','j'),new Array('k','k'),new Array('l','l'),new Array('m','m'),new Array('n','n'),new Array('o','o'),new Array('p','p'),new Array('q','q'),new Array('r','r'),new Array('s','s'),new Array('t','t'),new Array('u','u'),new Array('v','v'),new Array('w','w'),new Array('x','x'),new Array('y','y'),new Array('z','z'),new Array(';',';'),new Array('[',']'),new Array(',',','),new Array('.','.'),new Array('/','/'),new Array('+','+'),new Array('-','-'),new Array('*','*'),new Array('`','`'));

$(function(){  //jquery页面载入成功后自动执行
 
  $('#nw').click(function(){  //注册文本框的点击事件
    keyboard_show();  //点击文本框时执行keyboard_show()方法,将会打开网页键盘
  });
 
});

</script>

<script>
var wrap=null;
function keyboard_show(){  //创建键盘,并显示出来
  if(!wrap){
    wrap=document.createElement('div');
    wrap.id='kb_wrap';
    document.body.appendChild(wrap);
  }
  var v='<ul id="kb_list">';
  var sk=rnds(keys.length);  //创建一个随机的数组,用来将键盘打乱,产生随机效果
  for(var i=0; i<keys.length; i++)
    v+='<li title="'+keys[sk[i]][1]+'"><a onclick="keyboard_sendData(\''+keys[sk[i]][0]+'\');">'+keys[sk[i]][0]+'</a></li>';
  v+='<br class="cls" /></ul>';
  $(wrap).html(v);
}

function rnds(l){  //随机函数,返回数组,参数l为长度
  var arr=new Array();
  var arrs=new Array();
  function compare(a1,a2){
    return a1[1]-a2[1];
  }
  for(var i=0; i<l; i++) arr[i]=[i,Math.random()];
  arr.sort(compare);
  for(var i=0; i<arr.length; i++) arrs[i]=arr[i][0];
  return arrs;
}

function keyboard_sendData(s){  //点击键盘时将值放入文本框中,本文只是将值放到文本框最后,大家可以判断selectRange,将值放到合适的位置
  $('#nw').val($('#nw').val()+s);
  keyboard_show();  //再次创建键盘,这样键盘的位置会发生变化
}
</script>

在线演示

该文章在 2010/8/14 2:19:41 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved