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="width: 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(/Numpad\d/.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>
