用javascript写的小键盘

最近研究了一些在线支付网站的前端代码，在看易宝支付的商户接入网站时候发现他们使用的javascript小键盘很不错。在前端页面通过鼠标输入字符、密码可以防止黑客通过记录你点击键盘的按钮窃取你的重要信息，这里将易宝支付的小键盘组件和大家分享下。

　　首先还是页面的目录结果，如下图：

　　页面最终的效果如图所示：

　　vkboard.js的代码：

View Code

　　注意：

var_default_img_dir = 'js/';

 

　　这里设置你js文件存放的目录，这里我的图片放到js文件夹里，如果有的童鞋想放到其他目录下，那么修改如下的代码就行了：

vbk_preloadimages("key_normal.gif","key_cap.gif","key_enter.gif","key_space.gif","key_back.gif","key_t0.gif","key_t1.gif","key_t2.gif","key_tab.gif","key_shift_l.gif","key_shift_r.gif","keyboard.gif","key_normal_down.gif","key_cap_down.gif","key_enter_down.gif","key_space_down.gif","key_back_down.gif");

　　keyboard.js是个空文件，大伙不用关心哈。

　　keyboard.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>javascript 制作的小键盘</title>
</head>
<script type="text/javascript" src="js/vkboard.js"></script>
<body>
<div id="kbdiv"></div>
<form style=" margin-top:200px; margin-left:300px;">
    <label for="kbtxt">键盘输入的文本框：</label><input id="kbtxt" name="kbtxt" type="text" size="24" readonly="readonly"/><img src="images/key_icon.gif" id="kbimg" name="kbimg" style="margin-left:6px;"/>
</form>
<script type="text/javascript">
    createKeyboard("kbdiv","kbtxt","kbimg","true");
</script>
</body>
</html>
复制代码

　　调用很简单，我这里就不多说了。

　　我已经将源码上传到我的博客里，下载地址如下：

　　https://files.cnblogs.com/sharpxiajun/keyboard.zip

我将js键盘代码嵌入到我的博客里，不过键盘背景图片显示不好，大家可以试试看~~~~~~

posted @ 2012-04-25 17:21  rob_2010  阅读(406)  评论(0)    收藏  举报