vue 虚拟数字键盘

键盘

<div id="keyboardDiv" class="keyboardDiv keyboardStyle" style="display:none;position:fixed;z-index:20;" @mousedown="keyBoardFocusEvent" ><ul class="keyBox"><li class="keyStyle" data-key="1" data-code="49" @mousedown="keyDown($event)" @mouseup="keyUp($event)">1</li><li class="keyStyle" data-key="2" data-code="50" @mousedown="keyDown($event)" @mouseup="keyUp($event)">2</li><li class="keyStyle" data-key="3" data-code="51" @mousedown="keyDown($event)" @mouseup="keyUp($event)">3</li></ul><ul class="keyBox"><li class="keyStyle" data-key="4" data-code="52" @mousedown="keyDown($event)" @mouseup="keyUp($event)">4</li><li class="keyStyle" data-key="5" data-code="53" @mousedown="keyDown($event)" @mouseup="keyUp($event)">5</li><li class="keyStyle" data-key="6" data-code="54" @mousedown="keyDown($event)" @mouseup="keyUp($event)">6</li></ul><ul class="keyBox"><li class="keyStyle" data-key="7" data-code="55" @mousedown="keyDown($event)" @mouseup="keyUp($event)">7</li><li class="keyStyle" data-key="8" data-code="56" @mousedown="keyDown($event)" @mouseup="keyUp($event)">8</li><li class="keyStyle" data-key="9" data-code="57" @mousedown="keyDown($event)" @mouseup="keyUp($event)">9</li></ul><ul class="keyBox"><li class="keyStyle" data-key="." data-code="110" @mousedown="keyDown($event)" @mouseup="keyUp($event)">.</li><li class="keyStyle" data-key="0" data-code="48" @mousedown="keyDown($event)" @mouseup="keyUp($event)">0</li><li class="keyStyle" data-key="delete" data-code="46" style="background-color:#FFA07A" @mousedown="keyDown($event)" @mouseup="keyUp($event)">清除</li></ul>
</div>

样式

 // 键盘样式开始#keyboardDiv{margin-top: 50px;}.keyboardStyle{position: absolute;right: 45px;top: 30px;background-color: #72BBD7;padding: 15px 0px;border-radius:20px;width: 328px;}#keyboardDiv .keyBox{text-align: center;color: #ffffff;min-width: 350px;height: 47px;margin-left: -30px;margin-top: 0px;margin-right: 8px;}#keyboardDiv .keyStyle{display: inline-block;width: 100px;height: 65px;border: 2px solid #FFF;border-radius: 10px;line-height: 60px;text-align: center;text-transform: uppercase;-moz-user-select: none;transition: all 0.5s ease 0s;cursor: pointer;font-size: 20px;}.selectKey{color: red;background: rgb(255, 255, 255) none repeat scroll 0% 0%;}// 键盘样式结束

键盘按键按下事件

keyDown(event){// let key = window.event.keyCode;// var code = (event.keyCode ? event.keyCode : event.which);this.ifKeysShow = truevar key = event.target.attributes[1].nodeValuevar dataCode = event.target.attributes[2].nodeValueif(event){//1.先获取文本框id以及其原本的字符串var activeId = this.focusedTextId;//获取焦点的控件var divText =''if(activeId==='targetWeightDiv'){divText = this.targetWeight + ''}else if(activeId==='furPreDiv'){divText = this.furnace_pre + ''}else if(activeId==='furAppendDiv'){divText = this.furnace_append + ''}else{// divText = document.getElementById(activeId).innerHTML// divText = $("input[id="+activeId+"]").val()divText = this.$refs[activeId].valueif(!divText){divText=""}}//2.在已有的字符串基础上增/删if(key==='delete'&&divText.length>0){divText = divText.substring(0,divText.length-1)}else if(key!=='delete'){divText = divText + key}//3.将修改后的字符串赋值给文本框if(activeId==='targetWeightDiv'){this.targetWeight = divText}else if(activeId==='furPreDiv'){this.furnace_pre = divText}else if(activeId==='furAppendDiv'){this.furnace_append = divText}else{var id = this.$refs[activeId].$attrs.idid = id.split('In')var str = id[1] + 'Form'this.$set(this[str],id[0],divText)}}

键盘按键松开

keyUp(event){var key = event.target.attributes[1].nodeValuevar dataCode = event.target.attributes[2].nodeValue//点击的按键除去class，使得其在松开鼠标左键后变回原色$("#keyboardDiv li[data-code='" + dataCode + "']").removeClass("selectKey")//获取焦点document.getElementById(this.focusedTextId).focus()this.ifKeysShow = false//光标移到最后一位后面-DIV专用，input用不着//下面的判断用于div控件，div获取光标后，光标位置会错乱，下面几行代码让光标挪到最后if(this.focusedTextId=='targetWeightDiv'||this.focusedTextId=='furPreDiv'||this.focusedTextId=='furAppendDiv'){var range = document.createRange();// range.selectNodeContents(document.getElementById("targetWeightDiv"));range.selectNodeContents(document.getElementById(this.focusedTextId));range.collapse(false);var sel = window.getSelection();sel.removeAllRanges();sel.addRange(range);}},

文本框聚焦事件

  inputClickEvent(event){var value = event.srcElement.attributes.id.nodeValue //光标所在控件的id值this.focusedTextId = valuevar X = $('#'+value).offset().top;//控件的位置var Y = $('#'+value).offset().left;$("#keyboardDiv").css("display","block");$("#keyboardDiv").css("left", Y);//键盘将出现的位置$("#keyboardDiv").css("top", X+30);},

文本框失去焦点，键盘消失

  //炉重文本框失去焦点事件触发小键盘隐藏/不隐藏divBlur(){if(!this.ifKeysShow){$("#keyboardDiv").css("display","none");this.focusedTextId = ''}else{document.getElementById(this.focusedTextId).focus()}},