1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. <!--
  8. #in {
  9.     height: 40px;
  10.     width: 300px;
  11.     margin-right: auto;
  12.     margin-left: auto;
  13. }
  14. #key {
  15.     font-size: 25px;
  16.     line-height: 40px;
  17.     font-weight: bolder;
  18.     color: #FF0000;
  19.     height: 40px;
  20.     width: 300px;
  21.     border: 1px solid #FF9900;
  22. }
  23. div {
  24.     cursor: hand;
  25. }
  26. #box {
  27.     height: 200px;
  28.     width: 500px;
  29.     margin-top: 20px;
  30.     margin-right: auto;
  31.     margin-left: auto;
  32. }
  33. #b1 div {
  34.     font-size: 12px;
  35.     line-height: 20px;
  36.     color: #FFFFFF;
  37.     background-color: #FF9933;
  38.     text-align: center;
  39.     vertical-align: middle;
  40.     margin: 2px;
  41.     float: left;
  42.     height: 20px;
  43.     width: 25px;
  44. }
  45. #b2 div {
  46.     font-size: 12px;
  47.     line-height: 20px;
  48.     color: #FFFFFF;
  49.     background-color: #0066FF;
  50.     text-align: center;
  51.     vertical-align: middle;
  52.     margin: 2px;
  53.     float: left;
  54.     height: 20px;
  55.     width: 25px;
  56. }
  57. .cle {
  58.     clear: left;
  59.     margin: 0px;
  60.     height: 0px;
  61.     width: 0px;
  62. }
  63. #b3 div {
  64.     font-size: 12px;
  65.     line-height: 20px;
  66.     color: #FFFFFF;
  67.     background-color: #0066FF;
  68.     text-align: center;
  69.     vertical-align: middle;
  70.     margin: 2px;
  71.     height: 20px;
  72.     width: 25px;
  73.     float: left;
  74. }
  75. #b4 div {
  76.     font-size: 12px;
  77.     line-height: 20px;
  78.     color: #FFFFFF;
  79.     background-color: #0066FF;
  80.     text-align: center;
  81.     vertical-align: middle;
  82.     margin: 2px;
  83.     float: left;
  84.     height: 20px;
  85.     width: 25px;
  86. }
  87. -->
  88. </style>
  89. </head>
  90. <script language="javascript" src="js/jquery-1.10.2.min.js"></script>
  91. <script language="javascript">
  92.       var lock = false;
  93.  
  94.       function instr( str ){
  95.       if(lock){
  96.            srt = str.toUpperCase()
  97.       }
  98.            $("#key").val(   $("#key").val() + str   )
  99.         }
  100. </script>
  101.  
  102. <body>
  103. <div id="in"><input id="key" name="key" type="password" readonly="readonly"  />
  104. </div>
  105. <div id="box">
  106. <div id="b1">
  107.     <div id="n0">0</div>
  108.     <div id="n1">1</div>
  109.     <div id="n2">2</div>
  110.     <div id="n3">3</div>
  111.     <div id="n4">4</div>
  112.     <div id="n5">5</div>
  113.     <div id="n6">6</div>
  114.     <div id="n7">7</div>
  115.     <div id="n8">8</div>
  116.     <div id="n9">9</div>
  117.     <div id="nd">.</div>
  118.     <div id="del">←</div>
  119.     <div class="cle"></div>
  120. </div>
  121. <div id="b2">
  122.     <div id="q">q</div>
  123.     <div id="w">w</div>
  124.     <div id="e">e</div>
  125.     <div id="r">r</div>
  126.     <div id="t">t</div>
  127.     <div id="y">y</div>
  128.     <div id="u">u</div>
  129.     <div id="i">i</div>
  130.     <div id="o">o</div>
  131.     <div id="p">p</div>
  132.     <div class="cle"></div>
  133. </div>
  134. <div id="b3">
  135.     <div id="cl">Caps</div>
  136.     <div id="a">a</div>
  137.     <div id="s">s</div>
  138.     <div id="d">d</div>
  139.     <div id="f">f</div>
  140.     <div id="g">g</div>
  141.     <div id="h">h</div>
  142.     <div id="j">j</div>
  143.     <div id="k">k</div>
  144.     <div id="l">l</div>
  145.     <div class="cle"></div>
  146. </div>
  147. <div id="b4">
  148.     <div id="z">z</div>
  149.     <div id="x">x</div>
  150.     <div id="c">c</div>
  151.     <div id="v">v</div>
  152.     <div id="b">b</div>
  153.     <div id="n">n</div>
  154.     <div id="m">m</div>
  155.     <div id="sp">sp</div>
  156.  
  157. </div>
  158. </div>
  159. <script language="javascript">
  160.  
  161.         $("#n0").on("click" , function(){
  162.                 instr('0')
  163.          })
  164.  
  165.          $("#n1").on("click" , function(){
  166.                 instr('1')
  167.          })
  168.  
  169.          $("#n2").on("click" , function(){
  170.                 instr('2')
  171.          })
  172.  
  173.          $("#n3").on("click" , function(){
  174.                 instr('3')
  175.          })
  176.  
  177.          $("#n4").on("click" , function(){
  178.                 instr('4')
  179.          })
  180.  
  181.          $("#n5").on("click" , function(){
  182.                 instr('5')
  183.          })
  184.  
  185.          $("#n6").on("click" , function(){
  186.                 instr('6')
  187.          })
  188.  
  189.          $("#n7").on("click" , function(){
  190.                 instr('7')
  191.          })
  192.  
  193.          $("#n8").on("click" , function(){
  194.                 instr('8')
  195.          })
  196.          $("#n9").on("click" , function(){
  197.                 instr('9')
  198.          })
  199.          $("#nd").on("click" , function(){
  200.                 instr('.')
  201.          })
  202.  
  203.          $("#q").on("click" , function(){
  204.                 instr('q')
  205.          })
  206.          $("#w").on("click" , function(){
  207.                 instr('w')
  208.          })
  209.          $("#e").on("click" , function(){
  210.                 instr('e')
  211.          })
  212.          $("#r").on("click" , function(){
  213.                 instr('r')
  214.          })
  215.          $("#t").on("click" , function(){
  216.                 instr('t')
  217.          })
  218.          $("#y").on("click" , function(){
  219.                 instr('y')
  220.          })
  221.          $("#u").on("click" , function(){
  222.                 instr('u')
  223.          })
  224.          $("#i").on("click" , function(){
  225.                 instr('i')
  226.          })
  227.          $("#o").on("click" , function(){
  228.                 instr('o')
  229.          })
  230.          $("#p").on("click" , function(){
  231.                 instr('p')
  232.          })
  233.          //<div id="cl">Caps</div>
  234.  
  235.          $("#a").on("click" , function(){
  236.                 instr('a')
  237.          })
  238.          $("#s").on("click" , function(){
  239.                 instr('s')
  240.          })
  241.          $("#d").on("click" , function(){
  242.                 instr('d')
  243.          })
  244.          $("#f").on("click" , function(){
  245.                 instr('f')
  246.          })
  247.          $("#g").on("click" , function(){
  248.                 instr('g')
  249.          })
  250.          $("#h").on("click" , function(){
  251.                 instr('h')
  252.          })
  253.          $("#j").on("click" , function(){
  254.                 instr('j')
  255.          })
  256.          $("#k").on("click" , function(){
  257.                 instr('k')
  258.          })
  259.          $("#l").on("click" , function(){
  260.                 instr('l')
  261.          })
  262.  
  263.          $("#z").on("click" , function(){
  264.                 instr('z')
  265.          })
  266.          $("#x").on("click" , function(){
  267.                 instr('x')
  268.          })
  269.          $("#c").on("click" , function(){
  270.                 instr('c')
  271.          })
  272.          $("#v").on("click" , function(){
  273.                 instr('v')
  274.          })
  275.          $("#b").on("click" , function(){
  276.                 instr('b')
  277.          })
  278.          $("#n").on("click" , function(){
  279.                 instr('n')
  280.          })
  281.          $("#m").on("click" , function(){
  282.                 instr('m')
  283.          })
  284.           //<div id="sp">sp</div>
  285.  
  286.           $("#del").on("click" , function(){
  287.           var s = $("#key").val() //获取文本框的值
  288.           var s1
  289.           var i = 0
  290.           i = s.length - 1 //获取文本长度 -1
  291.           s1 = s.substr(0,i) //截取字符串s从 0位开始I个长度的字符
  292.  
  293.           $("#key").val(s1) //将截取后的字符串 回写到文本框内
  294.          })
  295.  
  296.          $("#cl").on("click" , function(){ 
  297.  
  298.                  if( lock ){
  299.                    lock = false;
  300.                  }else{
  301.                    lock = true;
  302.                   }
  303.  
  304.                   if(lock){
  305.                   $("div").css("text-transform","uppercase")
  306.                   }else{
  307.                   $("div").css("text-transform","none")
  308.                   }
  309.           })
  310. </script>
  311. </body>
  312. </html>

JavaScript + HTML 虚拟键盘效果的更多相关文章

  1. 普通键盘Windows上虚拟Cherry机械键盘效果的方法

    草台班子--普通键盘Windows上虚拟Cherry机械键盘效果的方法    ​ 机械键盘以其独特的手感.绚丽的外形,还有那人神共愤的音效吸引着大批爱好者.最近iQQO 3的机械键盘效果更是吸引了更多 ...

  2. 039. asp.netWeb用户控件之七实现具有虚拟键盘的功能的用户控件

    用户控件ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="K ...

  3. JS虚拟键盘

    由于是触摸屏,所以需要一款JS虚拟键盘.上网找了一个好用的VirtualKeyboard,作了修改. 修改该插件参考的博客文章:http://www.cnblogs.com/xinggong/arch ...

  4. 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop

    [源码下载] 重新想象 Windows 8 Store Apps (49) - 输入: 获取输入设备信息, 虚拟键盘, Tab 导航, Pointer, Tap, Drag, Drop 作者:weba ...

  5. 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程08：虚拟键盘实现》--本系列完结

    8.虚拟键盘实现 概述: 硬键盘就是物理键盘,平时敲的那种.软键盘是虚拟的键盘,不是在键盘上,而是在"屏幕"上.虚拟按键就是虚拟键盘的一部分,根据功能需求,提供部分按键效果的UI可 ...

  6. ios下虚拟键盘出现"搜索"字样

    最近在开发过程中,发现用户输入想要检索的内容,弹出虚拟键盘,在安卓机上虚拟键盘最右下角会有‘搜索’字样,而ios上虚拟键盘最右下角只有‘换行’字样, 这样用户体验就会大打折扣. 安卓机上虚拟键盘 io ...

  7. 关于cocos2d-x 中 CCEditBox 的输入位置和IOS虚拟键盘位置不重合的bug

    这个文章的名字起的实在是有点长,主要是怕说不清楚. 在IOS上,输入时,我看到过的比较少,就两种,如附件两张图.一个是虚拟键盘的输入框完全是在CCEditBox上,另一张虚拟键盘的输入区域是紧挨着键盘 ...

  8. 【转】iOS 上常用的两个功能：点击屏幕和return退出隐藏键盘和解决虚拟键盘挡住UITextField的方法

    iOS上面对键盘的处理很不人性化,所以这些功能都需要自己来实现, 首先是点击return和屏幕隐藏键盘 这个首先引用双子座的博客 http://my.oschina.net/plumsoft/blog ...

  9. C# Winform制作虚拟键盘，支持中文

    原文:C# Winform制作虚拟键盘,支持中文           最近在做一个虚拟键盘功能,代替鼠标键盘操作,效果如下:        实现思路:          1  构建中文-拼音 数据库, ...

随机推荐

  1. c语言选择排序

    简单选择排序是经常用到的一种排序算法. 原理: 1．简单选择排序一句话概括:每次选择无序数列中最小的将其放在有序数列的最后. 2．在简单选择排序中,我们用初始化的数字int a[6]={2,5,6,3 ...

  2. 微信web开发者工具初探

    最近需要在微信企业号中挂接网页,之前也没有接触过微信开发,刚开始也不知道怎么调试,后来同事介绍使用“微信web开发者工具”,于是在网上下了一个,使用了一下的确很好用.它不仅支持Android和IOS同 ...

  3. 计算软键盘的高度然后确定自定义的View的具体位置

    singleTouchView.getViewTreeObserver().addOnGlobalLayoutListener( new ViewTreeObserver.OnGlobalLayout ...

  4. JavaScript之作用域和引用类型

    学习js高级程序设计第四.五章 4.1基本类型和引用类型的值:基本类型值指的是简单的数据段,引用类型值指可能由多个值构成的对象. 引用类型的值是保存在内存中的对象,不能直接访问,而是按引用访问(类似指 ...

  5. L440 无线网卡：由于该设备有问题，Windows 已将其停止(代码 43)

    最近重装了系统,本来用的好好的,结果重启之后突然无线网卡不能用了,设备管理器老是黄色叹号!无线网卡设备状态:由于该设备有问题,Windows 已将其停止. (代码 43).      无线网卡型号:2 ...

  6. solr安装笔记与定时器任务

    一:solr启动 目前solr最高版本为5.5.0版本,很多solr安装都是说将server文件copy到tomcat中,但是solr版本自带有jetty的启动方式 首先下载solr-5.5.0版本, ...

  7. Java 压缩字符串

    1.引言 最近在做项目中,平台提供一个http服务给其他系统调用,然后我接收到其他系统的json格式的报文后去解析,然后用拿到的数据去调用corba服务,我再把corba的返回值封装完成json字符串 ...

  8. 如何用Maven创建web项目（具体步骤）

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   使用eclipse插件创建一个web project 首先创建一个Maven的Project如下图 我们勾选上Creat ...

  9. bootstrap-datepicker使用

    $('.date').datepicker({ language: 'zh-CN', --指定格式 format: 'yyyy-mm', --格式要求 autoclose: true, --选择后是否 ...

  10. maven 三个基本插件 clean dependency compiler

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...