jquery实现页面虚拟键盘特效_jquery

用法简介：

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实现文字特效、jquery 虚拟数字键盘、jquery虚拟键盘、jquery 中文虚拟键盘、jquery 实现键盘输入，以便于您获取更多的相关知识。

时间： 2024-10-29 04:33:29

jquery实现页面虚拟键盘特效_jquery的相关文章

一款由jquery实现的整屏切换特效_jquery

今天要为大家带来一款由jquery实现的整屏切换特效,在右侧有圆型小标,每点一个切换一屏.当然,你也可以滚动鼠标来切换页面.效果非常好.我们看下效果吧 源码下载 html代码: <div class="wrapper active-page4"> <div class="page page1"> <h2> First page</h2> </div> <div class="page pag

jQuery插件实现无缝滚动特效_jquery

首先来看下html骨架,如下: <div class="box"> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div> 结构简单明了,没什么说的. 讲下实现原理: div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:hidden (超出的内容隐藏)样式,因为滚动肯定是会超出b

基于jquery实现简单的手风琴特效_jquery

手风琴效果是项目中使用频率较高的一种效果,本文实例J就为大家讲述了jquery实现简单的手风琴特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: css样式 /* CSS Document */ body { margin: 0 auto; padding: 0 auto; font-size: 9pt; font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif; } .accordion { paddi

jQuery合作伙伴左右滚动特效_jquery

本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考.具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止自动滚动,鼠标离开自动滚动,点击左右按钮左右滚动Logo切换网页特效.可用于网站底部作为合作伙伴展示或友链展示的特效,是一款非常优秀的特效源码. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行

JQuery实现左右滚动菜单特效_jquery

 经过了半天的时间,这个使用JQuery开发出来的左右滚动菜单功能也算是完成了,暂时还没有发现错误的现象.现在把代码完整的代码拿出来分享! scrollable.js JQuery左右滚动菜单特效脚本代码引用片段: scrollable = function(content, render, options, beforeScroll) { /* * @author: selfimpr * @blog: http://blog.csdn.net/lgg201 * @e-mail: lgg8609

原生js和jquery实现图片轮播特效_jquery

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

jquery实现用户打分评分特效_jquery

js代码: <script type="text/javascript"> $(function(){ //简洁用户评分代码 $(".pfxtFen li").click(function(){ $(this).addClass("pfxtCur"); $(this).prevAll().addClass("pfxtCur"); $(this).nextAll().removeClass("pfxtCur

jQuery插件pagination实现分页特效_jquery

实用jQuery分页特效插件jquery.pagination.js基于jQuery实现可根据pageselectCallback函数callback调用通过ajax调用动态数据目前的方法是生成JSON数据到JS文件调用的数据是JSON格式数据缺点是数据是一次性读出来的效率会差些插件支持众多参数的自定义配置功能还是很不错的大家可以根据自己的想法进行改进. 使用方法 1.加载插件和jQuery <link rel="stylesheet" href="pagination

jquery制做精致的倒计时特效_jquery

本文实例为大家分享了jquery做一个小的倒计时效果的代码,供大家参考,具体内容如下 html: <div id="shop_rec"> <ul class="cf"> <li> <img src="image/goods.jpg" alt="小米 Note 顶配版" /> <div> <h5>小米 Note 顶配版</h5> <p>