jquery 界面显示软键盘

需求：客户端界面需要一个软键盘进行操作

做了一个简易的例子进行展示。
html代码：

<div id="container"> <div class="print-right"><div id="right-top" class="right-top"><div class="r-t-con"><input  type="text" id="txtBarcode" name="txtBarcode"placeholder="请输入" class="txtBarcode" autofocus="autofocus"/><ul id="keyboard"><li class="symbol"><span class="off">1</span></li><li class="symbol"><span class="off">2</span></li><li class="symbol"><span class="off">3</span></li><li class="symbol"><span class="off">4</span></li><li class="symbol"><span class="off">5</span></li><li class="symbol"><span class="off">6</span></li><li class="symbol"><span class="off">7</span></li><li class="symbol"><span class="off">8</span></li><li class="symbol"><span class="off">9</span></li><li class="symbol"><span class="off">0</span></li><li class="letter">q</li><li class="letter">w</li><li class="letter">e</li><li class="letter">r</li><li class="letter">t</li><li class="letter">y</li><li class="letter">u</li><li class="letter">i</li><li class="letter">o</li><li class="letter">p</li><li class="letter">a</li><li class="letter">s</li><li class="letter">d</li><li class="letter">f</li><li class="letter">g</li><li class="letter">h</li><li class="letter">j</li><li class="letter">k</li><li class="letter">l</li><li class="capslock lastitem">大写</li><li class="letter">z</li><li class="letter">x</li><li class="letter">c</li><li class="letter">v</li><li class="letter">b</li><li class="letter">n</li><li class="letter">m</li><li class="delete lastitem">删除</li><li class="enter lastitem" id="comfirm">确定</li><li class="lastitem" id="btnInspection" style="display: none;"></li><li class="lastitem" id="btnOutpatient" style="display: none;"></li><li class="lastitem" id="btnClose" style="display: none;"></li><li class="lastitem" id="btnPrescription" style="display: none;"></li></ul></div></div></div></div>

css代码：

* {margin: 0;padding: 0;
}
body {background: #000000;font-size: 16px;
}#container {margin: 100px auto;width: 620px;
}
#keyboard {margin: 0 auto;padding: 0;list-style: none;width: 96%;height: 240px;display: flex;justify-content: space-between;flex-wrap: wrap;
}#keyboard li {width: 56px;height: 50px;line-height: 50px;font-size: 20px;text-align: center;background: #fff;cursor: pointer;-moz-border-radius: 5px;-webkit-border-radius: 5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius: 5px;background: #005c8a;color: #FFFFFF;box-shadow: 3px 3px 3px #00aaff inset;
}#keyboard li:hover {position: relative;top: 2px;left: 2px;background-color: #00aaff;
}
.capslock, .tab, .left-shift {clear: left;
}#keyboard .tab, #keyboard .delete {width: 56px;
}
#keyboard .capslock {width: 56px;
}#keyboard .enter {width: 112px;
}.lastitem {margin-right: 0;
}.uppercase {text-transform: uppercase;
}
.on {display: none;
}
.print-content .print-right{/* float: right; */width: 48.5%;height: 100%;margin-right: 10px;overflow: hidden;
}
.print-right .txtBarcode{display: block;height: 40px;width: 96%;margin: 15px auto;padding: 10px;font-size: 16px;border: none;box-shadow:none;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;
}
input{outline: none;
}

js代码：

$(function() {let inputCode = $("#txtBarcode");let shift = false;let capslock = false;$("li").on("click",function() {let $this = $(this),character = $this.html();inputCode.focus();// 大小写Caps lockif ($this.hasClass("capslock")) {$(".letter").toggleClass("uppercase");capslock = true;return false;}//确定 if($this.hasClass("enter")){//点击确定执行其他//reportQuery('bingli');return false;}// 删除if ($this.hasClass("delete")) {let html = inputCode.val();inputCode.val(html.substr(0, html.length - 1));return false;}if ($this.hasClass("symbol")){character = $("span:visible", $this).html();} // 大写if ($this.hasClass("uppercase")) character = character.toUpperCase();inputCode.val(inputCode.val() + character);});
});

效果图：

jquery 界面显示软键盘相关推荐

基于jQuery的软键盘
基于jQuery的软键盘前些天写了一个基于基于jQuery的数字键盘,今天给大家带来一个基于jQuery的全字母键盘插件(支持全字母大小写切换,数字输入,退格清除,关闭功能,可调整大小和键盘位置(可 ...
基于jQuery的软键盘【模拟软键盘】
http://www.cnblogs.com/crookie/p/3796931.html http://mottie.github.io/Keyboard/docs/mobile.html http ...
layer弹窗在IOS上，被软键盘挤到上边的解决方法
就像这种情况,经过多番请教跟尝试,找到一个能解决这个问题的方法,但可能有点笨重.就是在当前弹框里,设置offset的值,里边的值可以随意写,然后再下边给弹框追加一个样式即可. <!DOCTYPE ...
Android 软键盘相关问题
1. windowSoftInputMode属性的使用 Android使用windowSoftInputMode来控制Activity 的主窗口与包含屏幕软键盘的窗口的交互方式. 该属性的设置影响两个 ...
android 关闭软键盘失去焦点,Android - html输入在软键盘打开时失去焦点（ASP.net）...
使用Nexus 4,Android 4.2.1本机Chrome浏览器 - 当我点击字段时,软键盘出现,然后该字段立即失去焦点.我必须再次点击字段,并且已经打开键盘才能输入文字. 这不会发生在桌面上的C ...
软键盘实例 request参数修改
软键盘实例 request参数修改这里的键盘里面的内容是乱序的,每次请求都会不一样的顺序. 键盘内容是一个DIV的背景图,方框是DIV边框.控制按钮直接在前台控制就行. 请求流程如下 JSP请求软 ...
android 键盘将底部视图顶起,android 弹出软键盘将底部视图顶起问题
今天要做一个搜索功能,搜索界面采用AutoCompleteTextView做搜索条,然后下面用listview来显示搜索结果,而我的主界面是在底部用tab做了一个主界面导航,其中有一个搜索按钮,因为 ...
5种方法完美解决android软键盘挡住输入框方法详解
版权声明:本文为CSDN博主「潇潇凤儿」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/smileiam/ ...
EditText软键盘的显示隐藏及焦点问题
简介 EditText作为Android输入框,对于Android开发来说,是不能再熟悉的一个控件.但是,使用EditText 有很多的细节需要注意.比如它的一些常用属性.焦点问题.软键盘的显示隐藏等 ...

jquery 界面显示软键盘

需求：客户端界面需要一个软键盘进行操作

jquery 界面显示软键盘相关推荐

最新文章

热门文章