icebob / vue-touch-keyboard Goto Github PK
View Code? Open in Web Editor NEWVirtual keyboard component for Vue.js 2.x. Designed to Raspberry Pi Touch Display
License: MIT License
Virtual keyboard component for Vue.js 2.x. Designed to Raspberry Pi Touch Display
License: MIT License
Hi, I got Duplicate keys error since update to latest vue.
It worked fine Less than 2.5.10.
Reproduction Link: https://jsfiddle.net/5brbuv8a/
<template>
<div>
<input type="text" placeholder="Text input" @focus="show" data-layout="normal" />
<vue-touch-keyboard v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" />
</div>
</template>
<script>
import layoutRu from "@/components/parts/keyboard-layout-ru"; // load default style
export default {
name: 'keyboard',
data () {
return {
visible: false,
layout: layoutRu,
input: null,
options: {
useKbEvents: false
}
}
}
.....
}
</script>
keyboard-layout-ru.js
module.exports = {
"normal": {
_meta: {
"tab": { key: "\t", text: "Tab", width: 60, classes: "control"},
"shiftl": { keySet: "shifted", text: "Shift", width: 100, classes: "control"},
"shiftr": { keySet: "shifted", text: "Shift", width: 100, classes: "control"},
"caps": { keySet: "capsed", text: "Caps lock", width: 80, classes: "control"},
"space": { key: " ", text: "Space", width: 180},
"enter": { key: "\r\n", text: "Enter", width: 80, classes: "control"},
"backspace": { func: "backspace", classes: "control backspace", width: 65},
"accept": { func: "accept", text: "Close", classes: "control featured"},
"next": { func: "next", text: "Next", classes: "control featured"}
},
default: [
"` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
"{tab} й ц у к е н г ш щ з х ъ \\",
"{caps} ф ы в а п р о л д ж э {enter}",
"{shiftl} я ч с м и т ь б ю . {shiftr}",
"{next} {space} , {accept}"
],
shifted: [
"~ ! @ # $ % ^ & * ( ) _ + {backspace}",
"{tab} Й Ц У К Е Н Г Ш Щ З Х Ъ |",
"{caps} Ф Ы В А П Р О Л Д Ж Э {enter}",
"{shiftl} Я Ч С М И Т Ь Б Ю . {shiftr}",
"{next} {space} , {accept}"
],
capsed: [
"` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
"{tab} Й Ц У К Е Н Г Ш Щ З Х Ъ |",
"{caps} Ф Ы В А П Р О Л Д Ж Э {enter}",
"{shiftl} Я Ч С М И Т Ь Б Ю . {shiftr}",
"{next} {space} , {accept}"
]
},
"compact": {
_meta: {
"default": { keySet: "default", text: "abc", classes: "control"},
"alpha": { keySet: "default", text: "Abc", classes: "control"},
"shift": { keySet: "shifted", text: "ABC", classes: "control"},
"numbers": { keySet: "numbers", text: "123", classes: "control"},
"space": { key: " ", text: "Space", width: 200},
"backspace": { func: "backspace", classes: "control"},
"accept": { func: "accept", text: "Close", classes: "control featured"},
"next": { func: "next", text: "Next", classes: "featured"},
"zero": { key: "0", width: 130}
},
default: [
"й ц у к е н г ш щ з х ъ",
" ф ы в а п р о л д ж э ",
"{shift} я ч с м и т ь б ю {backspace}",
"{numbers} , {space} . {next} {accept}"
],
shifted: [
"Й Ц У К Е Н Г Ш Щ З Х Ъ",
" Ф Ы В А П Р О Л Д Ж Э ",
"{default} Я Ч С М И Т Ь Б Ю ",
"{numbers} _ {space} {backspace} {next} {accept}"
],
numbers: [
"1 2 3",
"4 5 6",
"7 8 9",
" {alpha} . {zero} {backspace} {next} {accept}"
]
},
"numeric": {
_meta: {
"backspace": { func: "backspace", classes: "control"},
"accept": { func: "accept", text: "Close", classes: "control featured"},
"next": { func: "next", text: "Next", classes: "control featured"},
"zero": { key: "0", width: 130}
},
default: [
"1 2 3",
"4 5 6",
"7 8 9",
"_ - . {zero} {backspace} {next} {accept}"
]
}
};
Is there a way that i can customize the keys? as example i want to remove the "Space" on the space bar, and replace close with a arrow
They are not available?
I want to use the numeric layout without Next button. Let me know is it possible to remove multiple buttons such as "_" and "." buttons
When the keyboard pop ups, the bottom content are obviously get covered by the keyboard. There is no problem using it if the input field is on the top of the screen. The problem is when the input field is at the bottom of the page. I have no idea what I am typing.
Add an input field at the top of the keyboard. There should also be a label of the name of the field. So I dont forget what field I'm currently typing. I guess you can easily calculate if the input field will be covered by the keyboard.
For devices which support touchstart/touchend (or mousedown/mouseup?) it would be nice to see an auto-repeat function for when the user presses and holds a key (i.e. with configurable initial delay and repeat period). Would you consider pulling a patch which adds this functionality?
A lot of accidental double-presses are registering on my capacitive touch screen. Is there a simple way to debounce events? So a minimum of say, 175ms is required between registering key presses?
When using your code in the Typescript version of vue i get following error:
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <VueTouchKeyboard> [...]
also, there are no typings for use with TS
Hi,
I was wondering how or If I can edit the input on keydown or keypress?
In the working jsfiddle https://jsfiddle.net/icebob/88n7c1L8/ when a user presses on a key, the input box loses focus. I would like to keep focus and have the focus style applied when I press on any key. Is there any way I can do this?
Hi,
How to resolve below error? when doing npm run dev, it is normal ...
Thanks a lot!
--
D:\gitrepository\vue-touch-keyboard>npm run build
[email protected] prebuild D:\gitrepository\vue-touch-keyboard
npm run test
[email protected] pretest D:\gitrepository\vue-touch-keyboard
npm run lint
[email protected] lint D:\gitrepository\vue-touch-keyboard
eslint --ext=.js,.vue src test/unit/specs
[email protected] test D:\gitrepository\vue-touch-keyboard
npm run unit
[email protected] unit D:\gitrepository\vue-touch-keyboard
karma start test/unit/karma.conf.js
14 06 2017 13:19:07.724:ERROR [plugin]: Error during loading "D:\gitrepository\vue-touch-keyboard\node_modules/karma-phantomjs-launcher" plugin:
Path must be a string. Received null
14 06 2017 13:19:12.678:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
14 06 2017 13:19:12.683:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
14 06 2017 13:19:12.687:ERROR [karma]: Found 1 load error
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "unit"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] unit: karma start test/unit/karma.conf.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] unit script 'karma start test/unit/karma.conf.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-touch-keyboard package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! karma start test/unit/karma.conf.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-touch-keyboard
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-touch-keyboard
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\gitrepository\vue-touch-keyboard\npm-debug.log
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "test"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] test: npm run unit
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script 'npm run unit'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-touch-keyboard package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run unit
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-touch-keyboard
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-touch-keyboard
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\gitrepository\vue-touch-keyboard\npm-debug.log
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\nodejs\node.exe" "C:\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] prebuild: npm run test
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] prebuild script 'npm run test'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the vue-touch-keyboard package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run test
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs vue-touch-keyboard
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls vue-touch-keyboard
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:\gitrepository\vue-touch-keyboard\npm-debug.log
D:\gitrepository\vue-touch-keyboard>
I have set the options.useKbEvents to true and I hoped that this will trigger an update of the data property I used in v-model with the input field.
I see that the keypress event is dispatched but the data property doesn't update.
Do you know why?
Is there a workaround to achieve an automatic update of the data property?
Thanks for your help!
I have a keyboard with the numeric layout. When I click “5” and then the decimal point, it clears the value and I get this message in the console:
The specified value "5." is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
I’ve tried finding that error message in the codebase but can’t see where it or the pattern is defined.
Therefore, could this library be updated so selecting a decimal point doesn’t trash the value and instead lets me go on to specify the number after the decimal point?
I want to keep the layout of the keyboard to match a real one, but I want some areas to leave gaps. Something like
rowgap1: { width: 10 }
where a key is not created
Hey
Is it OK if I fork and add support for Persian ?
Do you have specific strategy for supporting other langs?
My suggestion is this syntax :
data-layout="per_normal"
data-layout="pol_normal"
I think this is the easiest and most appropriate way for supporting other langs. what do you think?
Hello,
Looks very nice keybord for vue, while I am using vuejs 2.0 in production, is there any plan for supportting v2.0?
Thanks!
Why not also HTMLTextAreaElement?
Inserting character over selection should behave as hardware keyboard does, replacing selection with pressed character.
Currently, inserting character over selection just inserts character on the beginign of selection.
I have created PR that expands this behavior. #38
I would like to know if there is an alternative to trigger a custom function in Vue on click?
As an example I'd like to change the width of the keyboard as I toggle between the numeric and the default keys.
Is it possible to add multi-language support?
Hi all,
I ran into some issues with the eslint vue rules, particularly vue/no-mutations-props:
Mutating a prop locally is now considered an anti-pattern, e.g. declaring a prop and then setting this.myProp = 'someOtherValue' in the component. Due to the new rendering mechanism, whenever the parent component re-renders, the child component’s local changes will be overwritten.
The issue are in clickKey and setFocusToInput methods:
this.input.value = text
(line 266)
this.input.selectionStart = caret.start
(286)
this.input.selectionEnd = caret.end
(line 287)
The workaround I made is the following:
I created an event listener on the parent component:
<vue-touch-keyboard <props> v-on:update-form="keyboardUpdate" />
---- in component methods
keyboardUpdate (d) {
this.keyboard.input[d.key] = d.value
}
In keyboard.vue, I replaced the above mentioned lines by:
this.input.value = text
=> this.$emit('update-form', { key: 'value', value: text })
this.input.selectionStart = caret.start
=> this.$emit('update-form', { key: 'selectionStart', value: caret.start })
this.input.selectionEnd = caret.end
=> this.$emit('update-form', { key: 'selectionEnd', value: caret.end })
Hope it serves other people!
as title , When I assign foucs or click event to input , but It will trigger andorid's keyboard . How can I prevent it.
When we select a range of characters in input, and hit backspace, it ignores selection and deletes only one character.
Backspace should delete selected range of characters, as hardware keyboard does.
Hi,
I am running "npm install", but got below error, how should I fix it? Thanks!
ERROR in ENOENT: no such file or directory, scandir 'D:\gitrepository\vue-touch-keyboard\node_modules\node-sass\vendor'
@ .//vue-style-loader!.//css-loader?sourceMap!.//vue-loader/lib/style-rewriter.js?{"id":"data-v-3488ec3c","scoped":false,"hasInlineConfig":false}!.//sass-loader!./~/vue-loader
/lib/selector.js?type=styles&index=0!./dev/App.vue 4:14-303 13:3-17:5 14:22-311
ERROR in ENOENT: no such file or directory, scandir 'D:\gitrepository\vue-touch-keyboard\node_modules\node-sass\vendor'
@ .//vue-style-loader!.//css-loader?sourceMap!.//vue-loader/lib/style-rewriter.js?{"id":"data-v-7962c167","scoped":false,"hasInlineConfig":false}!.//sass-loader!./~/vue-loader
/lib/selector.js?type=styles&index=0!./src/keyboard.vue 4:14-308 13:3-17:5 14:22-316
webpack: Failed to compile.
Is there a port? Alternative projects?
Thanks.
Hi, I'm using your (very helpful) plugin with a true kiosk machine that has no real keyboard input. It works really well, however we noticed that some elderly customers long-press on screen and as the whole plugin is based on click events, they feel the screen as unresponsive (they should leave the finger to see the input changed). It's a subtle feeling but it's there, and I wonder if a touchstart event could be better suited for this kind of interaction.
Your thoughts ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.