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 lock
		if ($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);
	});
});

效果图：