input模拟

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>vue $set</title>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 </head>
 <style type="text/css">
 </style>
 <body>
 <div id="app">
    <input v-model="value3" readonly spellcheck="false"  style="width: 400px;">
 </div>
 <script>
     var Main = {
         data () {
             return {
                 value3: '',
             }
         },
         methods: {
             filterMethod (e) {
                 if(e.keyCode===13){
                     alert(this.value3);
                 }
             },
         },
     }
     var Component = Vue.extend(Main)
     let App=new Component().$mount('#app');

     var input=document.querySelector('input');
     class KeyEvent {
       init(input,obj,key){//三个参数，第一个是节点input，第二个是挂在那个节点上，第三个双向绑定
         this.Input=input;
         this.InputVal=[];
         this.keyVal=[];
         this.realy=false;
         this.start=0;
         this.end=0;
         this.vm=obj;
         this.Input.addEventListener('compositionstart',(e)=>{//输入框第一位
           this.InputVal=this.Input.value.length>0 ? this.Input.value :'';
           this.start=this.Input.selectionStart;
           this.end=this.Input.selectionEnd;
           this.realy=true;
         });
         function FtoH(str){
           var str=str;
           var result="";
           for (var i = 0; i < str.length; i++){
             if (str.charCodeAt(i)==12288){
               result+= String.fromCharCode(str.charCodeAt(i)-12256);
               continue;
             }
             if (str.charCodeAt(i)>65280 && str.charCodeAt(i)<65375) result+= String.fromCharCode(str.charCodeAt(i)-65248);
             else result+= String.fromCharCode(str.charCodeAt(i));
           }
           return result;
         }
         this.Input.addEventListener('keyup',(e)=>{//keyup时，把全角转换
             this.vm[key]=FtoH(this.vm[key]);
         })
         this.Input.addEventListener('keydown',(e)=>{
             // if(e.key.toUpperCase()==='PROCESS'){//在中文输入法下
                 if(/Backspace/.test(e.code)){//中文输入法还没有进入输入框内时，然后删除
                   this.keyVal.splice(this.keyVal.length-1,1)
                 }
                 if(/Key/.test(e.code)){
                   let code=e.code.replace('Key','').toLowerCase();
                   this.keyVal.push(code);
                 }else if(/Digit/.test(e.code) && this.realy===true){//以Digit开头，并且不是第一位
                   let code=e.code.replace('Digit','').toLowerCase();
                   this.keyVal.push(code);
                 }else if(/Numpad\d/.test(e.code)&&e.code!=='NumpadEnter'){//在右边数字键盘数字是Numpad开头的
                     let code=e.code.replace('Numpad','').toLowerCase();
                     this.keyVal.push(code);
                 }
                 else if(/NumpadDivide|Slash/.test(e.code)){//除号/
                     this.keyVal.push('/');
                 }
                 else if(/NumpadMultiply/.test(e.code)){//乘号/
                     this.keyVal.push('*');
                 }
                 else if(/NumpadSubtract/.test(e.code)){//减号/
                     this.keyVal.push('-');
                 }
                 else if(/NumpadAdd/.test(e.code)){//加号/
                     this.keyVal.push('+');
                 }
                 else if(/NumpadDecimal|Period/.test(e.code)){//小数点/
                     this.keyVal.push('.');
                 }
                 else if(/Semicolon/.test(e.code)){
                   this.keyVal.push(':');
                 }
                 this.vm.value3=this.keyVal.join('')
             // }
         });
         this.Input.addEventListener('compositionend', (e) =>{
           if(this.keyVal.length>0){
                 if(this.end-this.start===0 && this.start===this.InputVal.length){
                     this.Input.value=this.InputVal+this.keyVal.join('');
                 }else if(this.end-this.start===0 && this.end<this.InputVal.length){
                     this.Input.value=this.InputVal.substring(0,this.end)+this.keyVal.join('')+this.InputVal.substring(this.end,this.InputVal.length);
                 }else if(this.end-this.start>0){
                     this.Input.value=this.InputVal.substring(0,this.start)+this.keyVal.join('')+this.InputVal.substring(this.end,this.InputVal.length);
                 }else if(this.end-this.start===0 && this.start>this.InputVal.length){
                     this.Input.value=this.InputVal+this.keyVal.join('');
                 }
                 this.vm[key]=this.Input.value;
                 this.Input.selectionStart=this.start+this.keyVal.length;
                 this.Input.selectionEnd=this.start+this.keyVal.length;
                 this.keyVal=[];
                 this.realy=false;
           }
         }, false);
       }
     }
     const _Key = new KeyEvent();
     _Key.init(input,App,'value3');
 </script>
 </body>
 </html>