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 = true
        var key = event.target.attributes[1].nodeValue
        var dataCode = event.target.attributes[2].nodeValue
        if(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].value
            if(!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.id
            id = id.split('In')
            var str = id[1] + 'Form'
            this.$set(this[str],id[0],divText)
          }
        }

键盘按键松开

keyUp(event){
        var key = event.target.attributes[1].nodeValue
        var 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 = value
    var 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()
    }
  },