首页
所有分类
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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
基于Jquery的仿照flash放大图片效果代码
Mar 16 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
JS实现躲避粒子小游戏
Jun 18 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
Navicat(1) maven(2) Kotlin(1) AOP(2) 动态权限(1) 自定义函数(1) V Rising(1) Android Gradle(1) Spring Security(2) 记事本(1)
You might like
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
一个刚完成的layout（拖动流畅，不受iframe影响）
2007/08/17 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
jQuery移动web开发中的页面初始化与加载事件
2015/12/03 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python基于Opencv来快速实现人脸识别过程详解（完整版）
2019/07/11 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
Ray-Ban雷朋西班牙官网：全球领先的太阳眼镜品牌
2018/11/28 全球购物
以下的初始化有什么区别
2013/12/16 面试题
空指针到底是什么
2012/08/07 面试题
教师个人自我鉴定
2014/02/08 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
对公司的意见和建议
2015/06/04 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
Vue监视数据的原理详解
2022/02/24 Vue.js
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers