Bug fixes, raw input support, readme upd

README.md

@@ -27,7 +27,11 @@ If you need to include one of these characters as a static part of the mask, you
 <masked-input v-model="phone" mask="+\\1 (111) 111-1111" placeholder="Phone number" type="tel" />
 ```
 
+You can also get a raw user input text if you want. Then, instead of using v-model you might need second argument of the input event:
+```vue
+<masked-input mask="+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" />
+```
+
 ## Known issues/TODO
-* Copy/cut/paste in FF
-* Copy/cut/paste in mobile Chrome
-* Cyrillic chars are not supported
+* Cut in mobile Chrome
+* Cyrillic chars are not supported in mobile Chrome

package.json

 {
   "name": "vue-masked-input",
   "description": "Masked input component for Vue.js 2.X",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "author": "niksmr",
   "license": "MIT",
   "homepage": "https://github.com/niksmr/vue-masked-input",
@@ -33,7 +33,7 @@
     "file-loader": "^0.9.0",
     "vue-loader": "^10.0.0",
     "vue-template-compiler": "^2.1.0",
-    "webpack": "^2.1.0-beta.25",
-    "webpack-dev-server": "^2.1.0-beta.9"
+    "webpack": "^2.2.0",
+    "webpack-dev-server": "^2.2.0"
   }
 }

src/App.vue

@@ -24,6 +24,11 @@
   <p class="code">
     &lt;masked-input v-model="phone" mask="+\1 (111) 1111-11" placeholder="Phone" /&gt;
   </p>
+  <h4>Get a raw value: </h4>
+  <masked-input mask="+\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" /><span>{{ rawVal }}</span>
+  <p class="code">
+    &lt;masked-input mask=&quot;+\1 (111) 1111-11&quot; placeholder=&quot;Phone&quot; <br />&nbsp;&nbsp;@input=&quot;rawVal = arguments[1]&quot; /&gt;
+  </p>
   <h4>Your own mask (hot re-mask available): </h4>
   <input v-model="userMask" placeholder="Mask" />
   <masked-input v-model="userField" :mask="userMask" placeholder="Text" /><span>{{ userField }}</span>
@@ -54,6 +59,7 @@ export default {
     phone: '',
     userMask: 'aa-aa-AAAA',
     userField: '',
+    rawVal: ''
   }),
   components: {
     MaskedInput

src/MaskedInput.vue

@@ -41,7 +41,11 @@ export default {
     mask: {
       type: String,
       required: true
-    }
+    },
+    placeholderChar: {
+      type: String,
+      default: '_'
+    },
   },
 
   watch: {
@@ -60,7 +64,24 @@ export default {
       try {
         this.mask_core = new InputMask({
           pattern: this.mask,
-          value: this.default
+          value: this.default,
+          placeholderChar: this.placeholderChar,
+          formatCharacters: {
+            'a': {
+              validate: char => /^[A-Za-zА-Яа-я]$/.test(char),
+            },
+            'A': {
+              validate: char => /^[A-Za-zА-Яа-я]$/.test(char) ,
+              transform: char => char.toUpperCase()
+            },
+            '*': {
+              validate: char => /^[\dA-Za-zА-Яа-я]$/.test(char),
+            },
+            '#': {
+              validate: char => /^[\dA-Za-zА-Яа-я]$/.test(char),
+              transform: char => char.toUpperCase()
+            },
+          }
         })
         this.$refs.input.value = this.default
         this.mask_core.setValue(this.default)
@@ -68,12 +89,12 @@ export default {
           start: 0,
           end: 0
         })
-        this.$emit('input', this.default)
+        this.$emit('input', this.default, this.default)
       }
       catch (e) {
         this.mask_core = null
         this.$refs.input.value = '0 editable chars in mask'
-        this.$emit('input', this.$refs.input.value)
+        this.$emit('input', this.$refs.input.value, '')
       }
     },
 
@@ -87,6 +108,8 @@ export default {
         e.preventDefault()
         return;
       }
+      this.setNativeSelection()
+
 
       switch (e.keyCode) {
 
@@ -178,6 +201,7 @@ export default {
     },
 
     keyPress(e) { //works only on Desktop  //Dirty FF hack
+      if (e.ctrlKey) return;
       if (navigator.userAgent.indexOf('Firefox') != -1 &&
       parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) {
         e.preventDefault()
@@ -203,10 +227,10 @@ export default {
     cut(e) {
       e.preventDefault();
       if (this.$refs.input.selectionStart !== this.$refs.input.selectionEnd) {
-        let text = this.$refs.input.value.slice(
+        /*let text = this.$refs.input.value.slice(
           this.$refs.input.selectionStart,
           this.$refs.input.selectionEnd
-        )
+        )*/
         try {
           document.execCommand('copy')
         } catch (err) {}
@@ -215,7 +239,8 @@ export default {
       }
     },
 
-    copy(e) {},
+    copy(e) {
+    },
 
     paste(e) {
       e.preventDefault()
@@ -227,10 +252,12 @@ export default {
       if (this.mask_core === null) {
         return;
       }
-      this.$refs.input.value = this.mask_core.getValue()
+      if (this.$refs.input.value !== this.mask_core.getValue()) {
+        this.$refs.input.value = this.mask_core.getValue()
+        this.$emit('input', this.$refs.input.value, this.mask_core.getRawValue())
+      }
       this.$refs.input.selectionStart = this.mask_core.selection.start;
       this.$refs.input.selectionEnd = this.mask_core.selection.end;
-      this.$emit('input', this.$refs.input.value)
     },
 
     focusin(e) {
@@ -248,7 +275,7 @@ export default {
           start: 0,
           end: 0
         })
-        this.$emit('input', this.default)
+        this.$emit('input', this.default, this.default)
       }
     },