jquery 界面显示软键盘

article/2025/11/9 6:18:08

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

做了一个简易的例子进行展示。
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);});
});