JavaScript + 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>无标题文档</title>
<style type="text/css">
<!--
#in {
    height: 40px;
    width: 300px;
    margin-right: auto;
    margin-left: auto;
}
#key {
    font-size: 25px;
    line-height: 40px;
    font-weight: bolder;
    color: #FF0000;
    height: 40px;
    width: 300px;
    border: 1px solid #FF9900;
}
div {
    cursor: hand;
}
#box {
    height: 200px;
    width: 500px;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
}
#b1 div {
    font-size: 12px;
    line-height: 20px;
    color: #FFFFFF;
    background-color: #FF9933;
    text-align: center;
    vertical-align: middle;
    margin: 2px;
    float: left;
    height: 20px;
    width: 25px;
}
#b2 div {
    font-size: 12px;
    line-height: 20px;
    color: #FFFFFF;
    background-color: #0066FF;
    text-align: center;
    vertical-align: middle;
    margin: 2px;
    float: left;
    height: 20px;
    width: 25px;
}
.cle {
    clear: left;
    margin: 0px;
    height: 0px;
    width: 0px;
}
#b3 div {
    font-size: 12px;
    line-height: 20px;
    color: #FFFFFF;
    background-color: #0066FF;
    text-align: center;
    vertical-align: middle;
    margin: 2px;
    height: 20px;
    width: 25px;
    float: left;
}
#b4 div {
    font-size: 12px;
    line-height: 20px;
    color: #FFFFFF;
    background-color: #0066FF;
    text-align: center;
    vertical-align: middle;
    margin: 2px;
    float: left;
    height: 20px;
    width: 25px;
}
-->
</style>
</head>
<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript">
      var lock = false;

      function instr( str ){
      if(lock){
           srt = str.toUpperCase()
      }
           $("#key").val(   $("#key").val() + str   )
        }
</script>

<body>
<div id="in"><input id="key" name="key" type="password" readonly="readonly"  />
</div>
<div id="box">
<div id="b1">
    <div id="n0">0</div>
    <div id="n1">1</div>
    <div id="n2">2</div>
    <div id="n3">3</div>
    <div id="n4">4</div>
    <div id="n5">5</div>
    <div id="n6">6</div>
    <div id="n7">7</div>
    <div id="n8">8</div>
    <div id="n9">9</div>
    <div id="nd">.</div>
    <div id="del">←</div>
    <div class="cle"></div>
</div>
<div id="b2">
    <div id="q">q</div>
    <div id="w">w</div>
    <div id="e">e</div>
    <div id="r">r</div>
    <div id="t">t</div>
    <div id="y">y</div>
    <div id="u">u</div>
    <div id="i">i</div>
    <div id="o">o</div>
    <div id="p">p</div>
    <div class="cle"></div>
</div>
<div id="b3">
    <div id="cl">Caps</div>
    <div id="a">a</div>
    <div id="s">s</div>
    <div id="d">d</div>
    <div id="f">f</div>
    <div id="g">g</div>
    <div id="h">h</div>
    <div id="j">j</div>
    <div id="k">k</div>
    <div id="l">l</div>
    <div class="cle"></div>
</div>
<div id="b4">
    <div id="z">z</div>
    <div id="x">x</div>
    <div id="c">c</div>
    <div id="v">v</div>
    <div id="b">b</div>
    <div id="n">n</div>
    <div id="m">m</div>
    <div id="sp">sp</div>

</div>
</div>
<script language="javascript">

        $("#n0").on("click" , function(){
                instr(‘0‘)
         })

         $("#n1").on("click" , function(){
                instr(‘1‘)
         })

         $("#n2").on("click" , function(){
                instr(‘2‘)
         })

         $("#n3").on("click" , function(){
                instr(‘3‘)
         })

         $("#n4").on("click" , function(){
                instr(‘4‘)
         })

         $("#n5").on("click" , function(){
                instr(‘5‘)
         })

         $("#n6").on("click" , function(){
                instr(‘6‘)
         })

         $("#n7").on("click" , function(){
                instr(‘7‘)
         })

         $("#n8").on("click" , function(){
                instr(‘8‘)
         })
         $("#n9").on("click" , function(){
                instr(‘9‘)
         })
         $("#nd").on("click" , function(){
                instr(‘.‘)
         })

         $("#q").on("click" , function(){
                instr(‘q‘)
         })
         $("#w").on("click" , function(){
                instr(‘w‘)
         })
         $("#e").on("click" , function(){
                instr(‘e‘)
         })
         $("#r").on("click" , function(){
                instr(‘r‘)
         })
         $("#t").on("click" , function(){
                instr(‘t‘)
         })
         $("#y").on("click" , function(){
                instr(‘y‘)
         })
         $("#u").on("click" , function(){
                instr(‘u‘)
         })
         $("#i").on("click" , function(){
                instr(‘i‘)
         })
         $("#o").on("click" , function(){
                instr(‘o‘)
         })
         $("#p").on("click" , function(){
                instr(‘p‘)
         })
         //<div id="cl">Caps</div>

         $("#a").on("click" , function(){
                instr(‘a‘)
         })
         $("#s").on("click" , function(){
                instr(‘s‘)
         })
         $("#d").on("click" , function(){
                instr(‘d‘)
         })
         $("#f").on("click" , function(){
                instr(‘f‘)
         })
         $("#g").on("click" , function(){
                instr(‘g‘)
         })
         $("#h").on("click" , function(){
                instr(‘h‘)
         })
         $("#j").on("click" , function(){
                instr(‘j‘)
         })
         $("#k").on("click" , function(){
                instr(‘k‘)
         })
         $("#l").on("click" , function(){
                instr(‘l‘)
         })

         $("#z").on("click" , function(){
                instr(‘z‘)
         })
         $("#x").on("click" , function(){
                instr(‘x‘)
         })
         $("#c").on("click" , function(){
                instr(‘c‘)
         })
         $("#v").on("click" , function(){
                instr(‘v‘)
         })
         $("#b").on("click" , function(){
                instr(‘b‘)
         })
         $("#n").on("click" , function(){
                instr(‘n‘)
         })
         $("#m").on("click" , function(){
                instr(‘m‘)
         })
          //<div id="sp">sp</div>

          $("#del").on("click" , function(){
          var s = $("#key").val() //获取文本框的值
          var s1
          var i = 0
          i = s.length - 1 //获取文本长度 -1
          s1 = s.substr(0,i) //截取字符串s从 0位开始I个长度的字符

          $("#key").val(s1) //将截取后的字符串 回写到文本框内
         })

         $("#cl").on("click" , function(){ 

                 if( lock ){
                   lock = false;
                 }else{
                   lock = true;
                  }

                  if(lock){
                  $("div").css("text-transform","uppercase")
                  }else{
                  $("div").css("text-transform","none")
                  }
          })
</script>
</body>
</html>

时间： 2024-08-28 07:58:38

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

微信开发安卓虚拟键盘挡住输入框的问题

是这样的,现在有一个这样的页面: 这个页面刚好一屏幕大小,所以没有滚动条,因为"保存"键上面那个项目备注是需要用户去填写的,当他点击后就会出现虚拟键盘,但安卓手机弹出键盘会遮住这个输入框,以至于用户看不见了.苹果手机天然不会喔,苹果手机的键盘弹出来是占了下面的位置,从而把页面推了上去,整个页面就缩小了就不会出现这样的情况.安卓手机情况如下图: 我不停尝试去解决这个问题,但最终都不成功. 思考一: 如果能模仿苹果一样,当键盘弹出来的时候,将整个页面缩小成页面底部刚好贴着键盘,那就完美了.

页面跳转和虚拟键盘的自动隐藏

前提:起码要有两个视图控制器. 注意事项: 设置跳转的动画效果 UITextField输入时,虚拟键盘的位置设置(整体布局向上移动,虚拟键盘的自动隐藏) 实现的功能: A:在第一个页面跳转到第二个页面,然后第二个页面点击按钮,进行返回 B:在第一个页面有一个text控件,点击一个按钮,传递到第二个页面,然后显示到第二个页面的label上面: 效果展示: 步骤: 1.新建两个类,然后勾选xib,在AppDelegate的实现文件把其中的一个视图加载进去 //新建一个视图控制器 MainViewC

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

iOS上面对键盘的处理很不人性化,所以这些功能都需要自己来实现, 首先是点击return和屏幕隐藏键盘这个首先引用双子座的博客 http://my.oschina.net/plumsoft/blog/42545,他的文章写的很好,对大家的理解很有好处. 在 iOS 程序中当想要在文本框中输入数据,轻触文本框会打开键盘.对于 iPad 程序,其键盘有一个按钮可以用来关闭键盘,但是 iPhone 程序中的键盘却没有这样的按钮,不过我们可以采取一些方法关闭它.例如,我们可以实现按下 Rerun (有

云电脑用虚拟键盘可以玩cf吗

玩游戏很多的玩家应该对"穿越火线",也就是我们俗称的CF不陌生,这款游戏也算是风靡一时,即使在今天依旧吸引着巨量玩家投入时间和经历.在发展了这么久之后,CF对电脑的配置要求也是变得越来越高,而且移动互联网时代,大家想在手机上体验CF"突突突"的快乐也不是一两天了. 而现在最有希望完成这一愿望的就是云电脑.在手机上安装云电脑之后,可以下载安装CF,不过用手机没有鼠标键盘,那么云电脑用虚拟键盘可以玩CF吗?那我们就从云电脑的概念来讲起. 云电脑是什么云电脑是云计算的产品

ios 最新系统bug与解决——微信公众号中弹出键盘再收起时，原虚拟键盘位点击事件无效

最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来... 公司用户反映微信公众号出现了点击无效的bug!!测试调查发现,只有iphonex.iphone6,ihpone7等部分机型会出现该问题我当时就是一惊,一般出现在事件上的问题都是疑难杂症.何况是跟键盘相关的. 我们都知道在H5端是没法监控键盘的弹出与收起的,resize事件触发的机型极其有限,何况我在ios中实测没有触发,安卓反而可以.因为安卓弹起键盘时会修改视窗的大小,但是ios并不会,如果你在ios上设置

原生js和css写虚拟键盘

代码来源忘记是哪个大神的了,抱歉抱歉放上源码:  <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title>虚拟键盘</title> <style> #inputArea{position: absolute; top: 30%; left: 20%;} .keyboardBox{position:

IOS系统下虚拟键盘遮挡文本框问题的解决

最近在项目中发现同样的代码在Android端微信网页中点击文本框唤出的虚拟键盘不会遮挡文本框,但是在IOS端的微信网页中点击文本框唤出的键盘却在大部分情况下会遮挡文本框经过高人指点,这个问题终于解决了下面说说解决办法: 主要代码 document.body.scrollTop = document.body.scrollHeight; 然后在文本框获取焦点的时候,可以定义一个计时器,一直执行上面的那句话在文本框失去焦点的时候,就把之前的计时器清除掉即可 js写法: let interval

〖Android〗简单隐藏Android虚拟键盘的方法

在Android使用 input 输入文本时,不期望出现虚拟键盘: 一般情况下,大家会把键盘给卸载,不过也有简单的方法: 就是下载一个 com.wparam.nullkeyboard (NullKeyboard): 在使用input命令前,把它设置成默认键盘即可: 下载链接: http://m.downloadatoz.com/apps/com.wparam.nullkeyboard,15672/download.html Google Play: https://play.google.com

手机端页面,隐藏虚拟键盘

原生js中没有方法来控制手机虚拟键盘的隐藏与显示,当输入框得到焦点时会自动弹出虚拟键盘,很多时候页面已经滚动到别处了,键盘应该隐藏了,可键盘还是没收回,这时候可用个变通的办法了隐藏键盘. 首先在页面增加一个input元素: <input type="text" class="input-null" id="input-null" readonly> css如下 .input_null { display: block; width: