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>