Fixed #5008 - InputNumber: Bug deprecated KeyCode Usage

components/lib/inputmask/InputMask.vue

@@ -82,7 +82,7 @@ export default {
                 return;
             }
 
-            let k = event.which || event.keyCode,
+            let k = event.code,
                 pos,
                 begin,
                 end;
@@ -91,14 +91,14 @@ export default {
             this.oldVal = this.$el.value;
 
             //backspace, delete, and escape get special treatment
-            if (k === 8 || k === 46 || (iPhone && k === 127)) {
+            if (k === 'Backspace' || k === 'Delete' || (iPhone && k === 'Escape')) {
                 pos = this.caret();
                 begin = pos.begin;
                 end = pos.end;
 
                 if (end - begin === 0) {
-                    begin = k !== 46 ? this.seekPrev(begin) : (end = this.seekNext(begin - 1));
+                    begin = k !== 'Delete' ? this.seekPrev(begin) : (end = this.seekNext(begin - 1));
-                    end = k === 46 ? this.seekNext(end) : end;
+                    end = k === 'Delete' ? this.seekNext(end) : end;
                 }
 
                 this.clearBuffer(begin, end);
@@ -106,11 +106,11 @@ export default {
                 this.updateModel(event);
 
                 event.preventDefault();
-            } else if (k === 13) {
+            } else if (k === 'Enter') {
                 // enter
                 this.$el.blur();
                 this.updateModel(event);
-            } else if (k === 27) {
+            } else if (k === 'Escape') {
                 // escape
                 this.$el.value = this.focusText;
                 this.caret(0, this.checkVal());
@@ -125,17 +125,17 @@ export default {
                 return;
             }
 
-            var k = event.which || event.keyCode,
+            var k = event.code,
                 pos = this.caret(),
                 p,
                 c,
                 next,
                 completed;
 
-            if (event.ctrlKey || event.altKey || event.metaKey || k < 32) {
+            if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey || event.key === 'CapsLock' || event.key === 'Escape' || event.key === 'Tab') {
                 //Ignore
                 return;
-            } else if (k && k !== 13) {
+            } else if (k && k !== 'Enter') {
                 if (pos.end - pos.begin !== 0) {
                     this.clearBuffer(pos.begin, pos.end);
                     this.shiftL(pos.begin, pos.end - 1);
@@ -144,7 +144,7 @@ export default {
                 p = this.seekNext(pos.begin - 1);
 
                 if (p < this.len) {
-                    c = String.fromCharCode(k);
+                    c = event.key;
 
                     if (this.tests[p].test(c)) {
                         this.shiftR(p);

components/lib/inputnumber/InputNumber.vue

@@ -18,7 +18,6 @@
             :aria-invalid="invalid || undefined"
             @input="onUserInput"
             @keydown="onInputKeyDown"
-            @keypress="onInputKeyPress"
             @paste="onPaste"
             @click="onInputClick"
             @focus="onInputFocus"
@@ -334,7 +333,7 @@ export default {
             }
         },
         onUpButtonKeyDown(event) {
-            if (event.keyCode === 32 || event.keyCode === 13) {
+            if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
                 this.repeat(event, null, 1);
             }
         },
@@ -361,7 +360,7 @@ export default {
             }
         },
         onDownButtonKeyDown(event) {
-            if (event.keyCode === 32 || event.keyCode === 13) {
+            if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
                 this.repeat(event, null, -1);
             }
         },
@@ -530,23 +529,23 @@ export default {
                     break;
 
                 default:
-                    break;
-            }
-        },
-        onInputKeyPress(event) {
                     if (this.readonly) {
                         return;
                     }
 
                     event.preventDefault();
-            let code = event.which || event.keyCode;
+
-            let char = String.fromCharCode(code);
+                    let char = event.key;
                     const isDecimalSign = this.isDecimalSign(char);
                     const isMinusSign = this.isMinusSign(char);
 
-            if ((48 <= code && code <= 57) || isMinusSign || isDecimalSign) {
+                    if (((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(char) >= 0 && Number(char) <= 9) || isMinusSign || isDecimalSign) {
+                        console.log(event.code);
                         this.insert(event, char, { isDecimalSign, isMinusSign });
                     }
+
+                    break;
+            }
         },
         onPaste(event) {
             event.preventDefault();

components/lib/inputotp/InputOtp.vue

@@ -129,22 +129,20 @@ export default {
             this.$emit('blur', event);
         },
         onKeyDown(event) {
-            const keyCode = event.keyCode;
+            switch (event.code) {
-
+                case 'ArrowLeft':
-            switch (keyCode) {
-                case 37:
                     this.moveToPrev(event);
                     event.preventDefault();
 
                     break;
 
-                case 38:
+                case 'ArrowUp':
-                case 40:
+                case 'ArrowDown':
                     event.preventDefault();
 
                     break;
 
-                case 8:
+                case 'Backspace':
                     if (event.target.value.length === 0) {
                         this.moveToPrev(event);
                         event.preventDefault();
@@ -152,14 +150,14 @@ export default {
 
                     break;
 
-                case 39:
+                case 'ArrowRight':
                     this.moveToNext(event);
                     event.preventDefault();
 
                     break;
 
                 default:
-                    if ((this.integerOnly && !((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) || (this.tokens.join('').length >= this.length && event.keyCode != 46)) {
+                    if ((this.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.code) >= 0 && Number(event.code) <= 9)) || (this.tokens.join('').length >= this.length && event.code !== 'Delete')) {
                         event.preventDefault();
                     }