Merge branch 'master' into fix-keypress-event-to-keydown

Author: icebob

README.md

@@ -56,7 +56,8 @@ https://github.com/icebob/vue-touch-keyboard/archive/master.zip
       layout: "normal",
       input: null,
       options: {
-        useKbEvents: false
+        useKbEvents: false,
+        preventClickEvent: false
       }
     },
 
@@ -97,6 +98,7 @@ Property      | Default  | Accepted values | Description
 Option      | Default  | Accepted values | Description
 ----------- | -------- | --------------- | -----------
 `useKbEvents`  | `false`  | `boolean`    | If true, the component will generate a `keydown` event and trigger it. If it returns with `false`, it won't insert the new character.
+`preventClickEvent`  | `false`  | `boolean`    | If true, the component will `preventDefault` the click event.
 
 ## Built-in layouts
 * `normal` - Normal full layout. Similar as real keyboard layouts

src/keyboard.vue

@@ -3,7 +3,7 @@
 		// input(type="text", v-model="keyboardText", v-if="!input")
 		.keyboard
 			.line(v-for="(line, index) in keySet", :key="index")
-				span(v-for="(key, index) in line", :key="index", :class="getClassesOfKey(key)", v-text="getCaptionOfKey(key)", @click="clickKey(key)", @mousedown="mousedown", :style="getKeyStyle(key)")
+				span(v-for="(key, index) in line", :key="index", :class="getClassesOfKey(key)", v-text="getCaptionOfKey(key)", @click="e => clickKey(e, key)", @mousedown="mousedown", :style="getKeyStyle(key)")
 
 
 </template>
@@ -176,15 +176,17 @@
 				return text;
 			},
 
-			mousedown() {
+			mousedown(e) {
 				if (!this.input) return;
+				if (this.options.preventClickEvent) e.preventDefault();
 
 				this.inputScrollLeft = this.input.scrollLeft;
 				//console.log("mousedown: ", this.input.scrollLeft, this.input.scrollWidth, this.input.clientWidth);
 			},
 
-			clickKey(key) {
+			clickKey(e, key) {
 				if (!this.input) return;
+				if (this.options.preventClickEvent) e.preventDefault();
 
 				let caret = this.getCaret();
 				let text = this.input.value;