diff --git a/README.md b/README.md index 5d84ca8..97334a1 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,8 @@ https://github.com/icebob/vue-touch-keyboard/archive/master.zip input: null, options: { useKbEvents: false, - preventClickEvent: false + preventClickEvent: false, + touchStart: false } }, @@ -103,6 +104,7 @@ 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. +`touchStart` | `false` | `boolean` | If true, the component will respond to `touchStart` event on touch devices (this will trigger the key when finger touches the screen and not when it leaves it as a click event does). Desktop behaviour does not change. ## Built-in layouts * `normal` - Normal full layout. Similar as real keyboard layouts diff --git a/package-lock.json b/package-lock.json index 0aa3e0a..3861097 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4292,7 +4292,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.1.1", @@ -4343,7 +4344,8 @@ "balanced-match": { "version": "0.4.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "bcrypt-pbkdf": { "version": "1.0.1", @@ -4358,6 +4360,7 @@ "version": "0.0.9", "bundled": true, "dev": true, + "optional": true, "requires": { "inherits": "~2.0.0" } @@ -4366,6 +4369,7 @@ "version": "2.10.1", "bundled": true, "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -4374,6 +4378,7 @@ "version": "1.1.7", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^0.4.1", "concat-map": "0.0.1" @@ -4382,7 +4387,8 @@ "buffer-shims": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "caseless": { "version": "0.12.0", @@ -4399,7 +4405,8 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "combined-stream": { "version": "1.0.5", @@ -4413,22 +4420,26 @@ "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "cryptiles": { "version": "2.0.5", "bundled": true, "dev": true, + "optional": true, "requires": { "boom": "2.x.x" } @@ -4501,7 +4512,8 @@ "extsprintf": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "forever-agent": { "version": "0.6.1", @@ -4515,20 +4527,22 @@ "dev": true, "optional": true, "requires": { - "asynckit": "0.4.0", - "combined-stream": "1.0.5", - "mime-types": "2.1.15" + "asynckit": "^0.4.0", + "combined-stream": "^1.0.5", + "mime-types": "^2.1.12" } }, "fs.realpath": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "fstream": { "version": "1.0.11", "bundled": true, "dev": true, + "optional": true, "requires": { "graceful-fs": "^4.1.2", "inherits": "~2.0.0", @@ -4584,6 +4598,7 @@ "version": "7.1.2", "bundled": true, "dev": true, + "optional": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -4596,7 +4611,8 @@ "graceful-fs": { "version": "4.1.11", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "har-schema": { "version": "1.0.5", @@ -4610,8 +4626,8 @@ "dev": true, "optional": true, "requires": { - "ajv": "4.11.8", - "har-schema": "1.0.5" + "ajv": "^4.9.1", + "har-schema": "^1.0.5" } }, "has-unicode": { @@ -4624,6 +4640,7 @@ "version": "3.1.3", "bundled": true, "dev": true, + "optional": true, "requires": { "boom": "2.x.x", "cryptiles": "2.x.x", @@ -4634,7 +4651,8 @@ "hoek": { "version": "2.16.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "http-signature": { "version": "1.1.1", @@ -4651,6 +4669,7 @@ "version": "1.0.6", "bundled": true, "dev": true, + "optional": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -4659,7 +4678,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.4", @@ -4671,8 +4691,9 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "is-typedarray": { @@ -4684,7 +4705,8 @@ "isarray": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "isstream": { "version": "0.1.2", @@ -4766,26 +4788,29 @@ "dev": true, "optional": true, "requires": { - "mime-db": "1.27.0" + "mime-db": "~1.27.0" } }, "minimatch": { "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { - "brace-expansion": "1.1.7" + "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "mkdirp": { "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4821,8 +4846,8 @@ "dev": true, "optional": true, "requires": { - "abbrev": "1.1.0", - "osenv": "0.1.4" + "abbrev": "1", + "osenv": "^0.1.4" } }, "npmlog": { @@ -4859,6 +4884,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -4881,14 +4907,15 @@ "dev": true, "optional": true, "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" } }, "path-is-absolute": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "performance-now": { "version": "0.2.0", @@ -4899,7 +4926,8 @@ "process-nextick-args": { "version": "1.0.7", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "punycode": { "version": "1.4.1", @@ -4937,6 +4965,7 @@ "version": "2.2.9", "bundled": true, "dev": true, + "optional": true, "requires": { "buffer-shims": "~1.0.0", "core-util-is": "~1.0.0", @@ -4981,6 +5010,7 @@ "version": "2.6.1", "bundled": true, "dev": true, + "optional": true, "requires": { "glob": "^7.0.5" } @@ -4988,7 +5018,8 @@ "safe-buffer": { "version": "5.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "semver": { "version": "5.3.0", @@ -5012,6 +5043,7 @@ "version": "1.0.9", "bundled": true, "dev": true, + "optional": true, "requires": { "hoek": "2.x.x" } @@ -5045,6 +5077,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5055,6 +5088,7 @@ "version": "1.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.0.1" } @@ -5069,6 +5103,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5083,6 +5118,7 @@ "version": "2.2.1", "bundled": true, "dev": true, + "optional": true, "requires": { "block-stream": "*", "fstream": "^1.0.2", @@ -5138,7 +5174,8 @@ "util-deprecate": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "uuid": { "version": "3.0.1", @@ -5167,7 +5204,8 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/src/keyboard.vue b/src/keyboard.vue index 566c9f2..7c88e24 100644 --- a/src/keyboard.vue +++ b/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="e => clickKey(e, key)", @mousedown="mousedown", :style="getKeyStyle(key)") + span(v-for="(key, index) in line", :key="index", :class="getClassesOfKey(key)", v-text="getCaptionOfKey(key)", v-on="{ click: e => clickHandler(e, key), touchstart: e => clickHandler(e, key) }", @mousedown="mousedown", :style="getKeyStyle(key)") @@ -34,12 +34,11 @@ } } }, - + data () { return { currentKeySet: this.defaultKeySet, - - inputScrollLeft: 0 + inputScrollLeft: 0, }; }, @@ -48,7 +47,7 @@ keySet() { let layout = this.getLayout(); if (!layout) return; - + let keySet = layout[this.currentKeySet]; if (!keySet) return; @@ -75,7 +74,7 @@ row.push({ placeholder: true }); - + } else { // Normal key row.push({ @@ -90,7 +89,7 @@ }); return res; - } + } }, watch: { @@ -106,21 +105,21 @@ return this.layout; }, - + changeKeySet(name) { let layout = this.getLayout(); if (layout[name] != null) this.currentKeySet = name; }, - + toggleKeySet(name) { this.currentKeySet = this.currentKeySet == name ? "default" : name; }, - + getCaptionOfKey(key) { return key.text || key.key || ""; }, - + getClassesOfKey(key) { if (key.placeholder) return "placeholder"; @@ -134,14 +133,14 @@ }, getKeyStyle(key) { - if (key.width) + if (key.width) return { flex: key.width }; }, supportsSelection() { - return (/text|password|search|tel|url/).test(this.input.type); + return (/text|password|search|tel|url/).test(this.input.type); }, getCaret() { @@ -194,13 +193,22 @@ this.inputScrollLeft = this.input.scrollLeft; }, + clickHandler(e, key) { + if (e.type === "touchstart" && this.options.touchStart) { + e.preventDefault(); + this.clickKey(e, key); + } else if (e.type === "click") { + this.clickKey(e, key); + } + }, + clickKey(e, key) { if (!this.input) return; if (this.options.preventClickEvent) e.preventDefault(); let caret = this.getCaret(); let text = this.input.value; - + let addChar = null; if (typeof key == "object") { if (key.keySet) { @@ -248,7 +256,7 @@ if (addChar) { if (this.input.maxLength <= 0 || text.length < this.input.maxLength) { if (this.options.useKbEvents) { - let e = document.createEvent("Event"); + let e = document.createEvent("Event"); e.initEvent("keydown", true, true); e.which = e.keyCode = addChar.charCodeAt(); if (this.input.dispatchEvent(e)) { @@ -257,7 +265,7 @@ } else { text = this.insertChar(caret, text, addChar); } - } + } if (this.currentKeySet == "shifted") this.changeKeySet("default"); @@ -279,27 +287,27 @@ this.input.dispatchEvent(new Event("input", { bubbles: true })); }, - + setFocusToInput(caret) { this.input.focus(); if (caret && this.supportsSelection()) { this.input.selectionStart = caret.start; this.input.selectionEnd = caret.end; } - } + } }, mounted() { if (this.input) { this.setFocusToInput(); - } + } } }; - +