input模拟

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>vue $set</title>
  6     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  7 </head>
  8 <style type="text/css">
  9 </style>
 10 <body>
 11 <div id="app">
 12    <input v-model="value3" readonly spellcheck="false"  style=" 400px;">
 13 </div>
 14 <script>
 15     var Main = {
 16         data () {
 17             return {
 18                 value3: '',
 19             }
 20         },
 21         methods: {
 22             filterMethod (e) {
 23                 if(e.keyCode===13){
 24                     alert(this.value3);
 25                 }
 26             },
 27         },
 28     }
 29     var Component = Vue.extend(Main)
 30     let App=new Component().$mount('#app');
 31 
 32     var input=document.querySelector('input');
 33     class KeyEvent {
 34       init(input,obj,key){//三个参数，第一个是节点input，第二个是挂在那个节点上，第三个双向绑定
 35         this.Input=input;
 36         this.InputVal=[];
 37         this.keyVal=[];
 38         this.realy=false;
 39         this.start=0;
 40         this.end=0;
 41         this.vm=obj;
 42         this.Input.addEventListener('compositionstart',(e)=>{//输入框第一位
 43           this.InputVal=this.Input.value.length>0 ? this.Input.value :'';
 44           this.start=this.Input.selectionStart;
 45           this.end=this.Input.selectionEnd;
 46           this.realy=true;
 47         });
 48         function FtoH(str){
 49           var str=str;
 50           var result="";
 51           for (var i = 0; i < str.length; i++){
 52             if (str.charCodeAt(i)==12288){
 53               result+= String.fromCharCode(str.charCodeAt(i)-12256);
 54               continue;
 55             }
 56             if (str.charCodeAt(i)>65280 && str.charCodeAt(i)<65375) result+= String.fromCharCode(str.charCodeAt(i)-65248);
 57             else result+= String.fromCharCode(str.charCodeAt(i));
 58           }
 59           return result;
 60         }
 61         this.Input.addEventListener('keyup',(e)=>{//keyup时，把全角转换
 62             this.vm[key]=FtoH(this.vm[key]);
 63         })
 64         this.Input.addEventListener('keydown',(e)=>{
 65             // if(e.key.toUpperCase()==='PROCESS'){//在中文输入法下
 66                 if(/Backspace/.test(e.code)){//中文输入法还没有进入输入框内时，然后删除
 67                   this.keyVal.splice(this.keyVal.length-1,1)
 68                 }
 69                 if(/Key/.test(e.code)){
 70                   let code=e.code.replace('Key','').toLowerCase();
 71                   this.keyVal.push(code);
 72                 }else if(/Digit/.test(e.code) && this.realy===true){//以Digit开头，并且不是第一位
 73                   let code=e.code.replace('Digit','').toLowerCase();
 74                   this.keyVal.push(code);
 75                 }else if(/Numpadd/.test(e.code)&&e.code!=='NumpadEnter'){//在右边数字键盘数字是Numpad开头的
 76                     let code=e.code.replace('Numpad','').toLowerCase();
 77                     this.keyVal.push(code);
 78                 }
 79                 else if(/NumpadDivide|Slash/.test(e.code)){//除号/
 80                     this.keyVal.push('/');
 81                 }
 82                 else if(/NumpadMultiply/.test(e.code)){//乘号/
 83                     this.keyVal.push('*');
 84                 }
 85                 else if(/NumpadSubtract/.test(e.code)){//减号/
 86                     this.keyVal.push('-');
 87                 }
 88                 else if(/NumpadAdd/.test(e.code)){//加号/
 89                     this.keyVal.push('+');
 90                 }
 91                 else if(/NumpadDecimal|Period/.test(e.code)){//小数点/
 92                     this.keyVal.push('.');
 93                 }
 94                 else if(/Semicolon/.test(e.code)){
 95                   this.keyVal.push(':');
 96                 }
 97                 this.vm.value3=this.keyVal.join('')
 98             // }
 99         });
100         this.Input.addEventListener('compositionend', (e) =>{
101           if(this.keyVal.length>0){
102                 if(this.end-this.start===0 && this.start===this.InputVal.length){
103                     this.Input.value=this.InputVal+this.keyVal.join('');
104                 }else if(this.end-this.start===0 && this.end<this.InputVal.length){
105                     this.Input.value=this.InputVal.substring(0,this.end)+this.keyVal.join('')+this.InputVal.substring(this.end,this.InputVal.length);
106                 }else if(this.end-this.start>0){
107                     this.Input.value=this.InputVal.substring(0,this.start)+this.keyVal.join('')+this.InputVal.substring(this.end,this.InputVal.length);
108                 }else if(this.end-this.start===0 && this.start>this.InputVal.length){
109                     this.Input.value=this.InputVal+this.keyVal.join('');
110                 }
111                 this.vm[key]=this.Input.value;
112                 this.Input.selectionStart=this.start+this.keyVal.length;
113                 this.Input.selectionEnd=this.start+this.keyVal.length;
114                 this.keyVal=[];
115                 this.realy=false;
116           }
117         }, false);
118       }
119     }
120     const _Key = new KeyEvent();
121     _Key.init(input,App,'value3');
122 </script>
123 </body>
124 </html>