首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery实现页面虚拟键盘特效

Posted in Javascript onAugust 08, 2015

用法简介：

jquery页面虚拟键盘设计带有数字与字母切换功能。

文件引用：

//给输入的密码框添加新值 
function addValue(newValue) 
{ 
  CapsLockValue==0?$(".input_cur").val($(".shuru").val()+ newValue):$(".input_cur").val($(".shuru").val()+ newValue.toUpperCase())
} 
//清空 
function clearValue() 
{ 
  $(".input_cur").val(""); 
} 
//实现BackSpace键的功能 
function backspace() 
{ 
  var longnum=$(".input_cur").val().length; 
  var num ;
  num=$(".input_cur").val().substr(0,longnum-1); 
  $(".input_cur").val(num); 
} 
function changePanl(oj){
  $("#"+oj).siblings("div").hide();
  $("#"+oj).show();
}
//设置是否大写的值 
function setCapsLock(o) 
{ 
   if (CapsLockValue==0){ 
       CapsLockValue=1; 
      $(o).val("转化小写");
      $.each($(".i_button_zm"),function(b, c) { 
       $(c).val($(c).val().toUpperCase());
      });
   }else{ 
       CapsLockValue=0; 
      $(o).val("转化大写"); 
      $.each($(".i_button_zm"),function(b, c) { 
       $(c).val($(c).val().toLowerCase());
      });
   }
} 
window.onload=function(){
// changePanl("zimu");
}

CSS

.softkeyboard{ display:inline-block;}
.softkeyboard td{ padding:4px;}
.c_panel{ background-color:#333; text-align:center; padding:15px;}
.input_cur{ border:1px solid #f00;}
.i_button{ border:none; height:40px; width:50px; font-size:16px; font-family:"微软雅黑"; background-color:#666; color:#fff;}
.i_button:active{ background-color:#999;}
.i_button_num{}
.i_button_btn{ float:right; width:88px;}
.i_button_bs{ float:right; width:148px;}

HTML

<input type="text" name="text1" class="shuru input_cur" ><br>
<script>
//定义当前是否大写的状态 
var CapsLockValue=0; 
var curEditName;
var check; 
//document.write (' <DIV align=center id=\"softkeyboard\" name=\"softkeyboard\" style=\"position:absolute; left:300px; top:320px; width:517px; z-index:180;display:none\">'); 
document.write (' <DIV class=\"softkeyboard\" id=\"softkeyboard\" name=\"softkeyboard\" style=\"display:; \">'); 
//document.write (' ------数字----'); 
document.write (' <div class=\"c_panel shuzi\" id="shuzi">'); 
document.write ('<table align=\"center\" width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">');
document.write (' <tr> '); 
document.write (' <td><input class="i_button i_button_num" type=button onclick=\"addValue(\'7\');\" value=\" 7 \"></td>'); 
document.write (' <td><input class="i_button i_button_num" type=button onclick=\"addValue(\'8\');\" value=\" 8 \"></td>'); 
document.write (' <td><input class="i_button i_button_num" type=button onclick=\"addValue(\'9\');\" value=\" 9 \"></td>'); 
document.write (' <td><input class="i_button i_button_btn i_button_sz" onclick=\"changePanl(\'zimu\');\" type=button value=符号 ></td>'); 
document.write (' </tr>'); 
document.write (' <tr> '); 
document.write (' <td><input class="i_button i_button_num" type=button onclick=\"addValue(\'4\');\" value=\" 4 \"></td>'); 
document.write (' <td><input class="i_button i_button_num" type=button onclick=\"addValue(\'5\');\" value=\" 5 \"></td>'); 
document.write (' <td><input class="i_button i_button_num" type=button onclick=\"addValue(\'6\');\" value=\" 6 \"></td>'); 
document.write (' <td><input class="i_button i_button_btn i_button_sz" onclick=\"changePanl(\'zimu\');\" type=button value=字母></td>'); 
document.write (' </tr>'); 
document.write (' <tr> '); 
document.write (' <td><input class="i_button i_button_num" type=button onclick=\"addValue(\'1\');\" value=\" 1 \"></td>'); 
document.write (' <td><input class="i_button i_button_num" type=button onclick=\"addValue(\'2\');\" value=\" 2 \"></td>'); 
document.write (' <td><input class="i_button i_button_num" type=button onclick=\"addValue(\'3\');\" value=\" 3 \"></td>'); 
document.write (' <td><input class="i_button i_button_btn" type=button onclick=\"clearValue();\" value=清空 ></td>'); 
document.write (' </tr>'); 
document.write (' <tr> '); 
document.write (' <td><input class="i_button i_button_num" type=button onclick=\"addValue(\'0\');\" value=\" 0 \"></td>'); 
document.write (' <td></td>'); 
document.write (' <td colspan=2><input class="i_button i_button_bs" type=button value=\" BackSpace\" onclick=\"backspace();\"></td>'); 
document.write (' </tr>'); 
document.write (' </table>'); 
document.write ('</DIV>'); 
//document.write ('--------------------------------------------'); 
//document.write (' ------字母----');
document.write (' <div class=\"c_panel zimu\" id=\"zimu\" style=\"display:none;\">'); 
document.write (' <table align=\"center\" width=\"98%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">'); 
document.write (' <tr> '); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'~\');\" value=\" ~ \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'!\');\" value=\" ! \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'@\');\" value=\" @ \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'#\');\" value=\" # \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'$\');\" value=\" $ \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'%\');\" value=\" % \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'^\');\" value=\" ^ \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'*\');\" value=\" * \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'(\');\" value=\" ( \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\')\');\" value=\" ) \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'-\');\" value=\" - \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'+\');\" value=\" + \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'=\');\" value=\" = \"></td>'); 
document.write (' <td><input class="i_button i_button_btn" type=button onclick=\"changePanl(\'shuzi\');\" value=\"切换数字\"></td>'); 
document.write (' </tr>');
document.write (' <tr> '); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'q\');\" value=\" q \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'w\');\" value=\" w \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'e\');\" value=\" e \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'r\');\" value=\" r \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'t\');\" value=\" t \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'y\');\" value=\" y \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'u\');\" value=\" u \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'i\');\" value=\" i \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'o\');\" value=\" o \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'p\');\" value=\" p \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onClick=\"addValue(\'[\');\" value=\" [ \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onClick=\"addValue(\']\');\" value=\" ] \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onClick=\"addValue(\'{\');\" value=\" { \"></td>'); 
document.write (' <td><input class="i_button i_button_btn" type=button onClick=\"setCapsLock(this);\" value=\"切换大写\"></td>'); 
document.write (' </tr>'); 
document.write (' <tr> '); 
document.write (' <td><input class="i_button i_button_fh" type=button onClick=\"addValue(\'|\');\" value=\" | \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'a\');\" value=\" a \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'s\');\" value=\" s \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'d\');\" value=\" d \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'f\');\" value=\" f \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'g\');\" value=\" g \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'h\');\" value=\" h \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'j\');\" value=\" j \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'k\');\" value=\" k \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'l\');\" value=\" l \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\';\');\" value=\" ; \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\':\');\" value=\" : \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onClick=\"addValue(\'}\');\" value=\" } \"></td>'); 
document.write (' <td><input class="i_button i_button_btn" type=button onclick=\"clearValue();\" value=清空 ></td>'); 
document.write (' </tr>');
document.write (' <tr> '); 
document.write (' <td><input class="i_button i_button_fh" type=button onclick=\"addValue(\'_\');\" value=\" _ \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'z\');\" value=\" z \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'x\');\" value=\" x \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'c\');\" value=\" c \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'v\');\" value=\" v \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'b\');\" value=\" b \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'n\');\" value=\" n \"></td>'); 
document.write (' <td><input class="i_button i_button_zm" type=button onclick=\"addValue(\'m\');\" value=\" m \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onClick=\"addValue(\'<\');\" value=\" < \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onClick=\"addValue(\'>\');\" value=\" > \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onClick=\"addValue(\'/\');\" value=\" / \"></td>'); 
document.write (' <td><input class="i_button i_button_fh" type=button onClick=\"addValue(\'?\');\" value=\" ? \"></td>'); 
document.write (' <td colspan=2><input class="i_button i_button_bs" type=button value=\" BackSpace\" onclick=\"backspace();\"></td>'); 
document.write (' </tr>'); 
document.write (' </table>'); 
document.write (' </div>'); 
//document.write ('--------------------------------------------'); 
document.write ('</DIV>'); 
//给输入的密码框添加新值 
function addValue(newValue) 
{ 
 CapsLockValue==0?$(".input_cur").val($(".shuru").val()+ newValue):$(".input_cur").val($(".shuru").val()+ newValue.toUpperCase())
} 
//清空 
function clearValue() 
{ 
 $(".input_cur").val(""); 
} 
//实现BackSpace键的功能 
function backspace() 
{ 
 var longnum=$(".input_cur").val().length; 
 var num ;
 num=$(".input_cur").val().substr(0,longnum-1); 
 $(".input_cur").val(num); 
} 
function changePanl(oj){
 $("#"+oj).siblings("div").hide();
 $("#"+oj).show();
}
//设置是否大写的值 
function setCapsLock(o) 
{ 
  if (CapsLockValue==0){ 
   CapsLockValue=1; 
  $(o).val("转化小写");
  $.each($(".i_button_zm"),function(b, c) { 
   $(c).val($(c).val().toUpperCase());
  });
  }else{ 
   CapsLockValue=0; 
  $(o).val("转化大写"); 
  $.each($(".i_button_zm"),function(b, c) { 
   $(c).val($(c).val().toLowerCase());
  });
  }
} 
window.onload=function(){
// changePanl("zimu");
}
</script>

演示效果：

jquery实现页面虚拟键盘特效

屏幕键盘在网络生活中很常见，比如使用网银或在线查询信用卡余额，在输入密码等敏感数据时，应该就会用到屏幕键盘。以防止被木马或恶意程序捕获盗取实际键盘上的操作。希望本文能够对大家有所帮助。

jquery实现页面虚拟键盘特效

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js压缩利器
Feb 20 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
将页面table内容与样式另存成excel文件的方法
Aug 05 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
ES6的解构赋值实例详解
May 06 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
Jquery实现顶部弹出框特效
Aug 08 #Javascript
Jquery数字上下滚动动态切换插件
Aug 08 #Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 #Javascript
jQuery实现列表内容的动态载入特效
Aug 08 #Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 #Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 #Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 #Javascript
SSL(3) Rewrite(4) lamp(1) lnmp(1) 跨域(4) Centos(8) destoon(1) 伪静态(1) URL重定向(3)  AD域(1)
You might like
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
PHP用户管理中常用接口调用实例及解析（含源码）
2017/03/09 PHP
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
Javascript vue.js表格分页，ajax异步加载数据
2016/10/24 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
layui导航栏实现代码
2017/05/19 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
python实现画一颗树和一片森林
2018/06/25 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
护士实习自荐信
2015/03/06 职场文书
英文自荐信范文
2015/03/25 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript