Some fixes for number input type

README.md

@@ -121,6 +121,10 @@ and with vanilla JS attribute, but make sure that mask value is proper `JSON`, s
 <input data-mask='["# cm", "#.# cm", "#.## cm"]'>
 ```
 
+## Known issues
+
+When used on input of type `number` could have inconsistent behavior in different browsers. Use attribute `inputmode` if you just need a numeric keyboard for given input.
+
 ## Source of Inspiration
 
 - [vue-the-mask](https://vuejs-tips.github.io/vue-the-mask/)

docs/index.htm

@@ -118,7 +118,7 @@
     </section>
 
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/maska@1.1.2/dist/maska.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maska@1.1.3/dist/maska.js"></script>
     <script>
         // vue
         new Vue({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maska",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Simple zero-dependency input mask for Vue.js and vanilla JS",
   "keywords": [
     "mask",

src/maska.js

@@ -34,6 +34,7 @@ export default class Maska {
       if (!el.dataset.maskInited) {
         el.dataset.maskInited = true
         el.addEventListener('input', evt => this.updateValue(evt.target))
+        el.addEventListener('beforeinput', evt => this.beforeInput(evt))
       }
     }
   }
@@ -42,13 +43,15 @@ export default class Maska {
     for (let i = 0; i < this._el.length; i++) {
       const el = findInputElement(this._el[i])
       el.removeEventListener('input', evt => this.updateValue(evt.target))
+      el.removeEventListener('beforeinput', evt => this.beforeInput(evt))
       delete el.dataset.mask
       delete el.dataset.maskInited
     }
   }
 
   updateValue (el) {
-    if (!el.value || !el.dataset.mask) return
+    const wrongNum = el.type.match(/^number$/i) && el.validity.badInput
+    if ((!el.value && !wrongNum) || !el.dataset.mask) return
 
     const position = el.selectionEnd
     const oldValue = el.value
@@ -59,4 +62,10 @@ export default class Maska {
       el.dispatchEvent(event('input'))
     }
   }
+
+  beforeInput (e) {
+    if (e.target.type.match(/^number$/i) && e.data && isNaN(e.target.value + e.data)) {
+      e.preventDefault()
+    }
+  }
 }

src/utils.js

@@ -16,7 +16,8 @@ function fixInputSelection (el, position, digit) {
     position++
   }
 
-  if (el === document.activeElement) {
+  const selectionRange = (el.type && el.type.match(/^(text|search|password|tel|url)$/i) || !el.type)
+  if (selectionRange && el === document.activeElement) {
     el.setSelectionRange(position, position)
     setTimeout(function () {
       el.setSelectionRange(position, position)