vue-touch-keyboard

vue-touch-keyboard copied to clipboard

Multi-language support

[{"_id":"6345958f8402fb318b70bff0","body":"the same problem\r\nthink migrate to https:\/\/virtual-keyboard.js.org\/vuejs\/","issue_id":1660429817107,"origin_id":517194681,"user_origin_id":8008462,"create_time":1564649900,"update_time":1564649900,"id":1665504655220,"updated_at":"2022-10-11T16:10:55.219000Z","created_at":"2022-10-11T16:10:55.219000Z"}]

Is it possible to add multi-language support?

dorinniscu

Correct key widths

[{"_id":"63458b9309a35269b781101c","body":"\n[](https:\/\/coveralls.io\/builds\/22072311)\n\nCoverage remained the same at 5.217% when pulling **4f65a0704e849f4c7414b4af419c9e700304e546 on MiniGod:correct-key-widths** into **8bfd533824ab88c33d6186cc46c6da80e38a2eba on icebob:master**.\n","issue_id":1660429817116,"origin_id":471031313,"user_origin_id":2354108,"create_time":1552070275,"update_time":1552070275,"id":1665502099258,"updated_at":"2022-10-11T15:28:19.258000Z","created_at":"2022-10-11T15:28:19.258000Z"},{"_id":"63458b9309a35269b781101d","body":"\n[](https:\/\/coveralls.io\/builds\/22072311)\n\nCoverage remained the same at 5.217% when pulling **4f65a0704e849f4c7414b4af419c9e700304e546 on MiniGod:correct-key-widths** into **8bfd533824ab88c33d6186cc46c6da80e38a2eba on icebob:master**.\n","issue_id":1660429817116,"origin_id":471031314,"user_origin_id":2354108,"create_time":1552070275,"update_time":1552070275,"id":1665502099261,"updated_at":"2022-10-11T15:28:19.261000Z","created_at":"2022-10-11T15:28:19.261000Z"},{"_id":"63458b9309a35269b781101e","body":"\n[](https:\/\/coveralls.io\/builds\/24602617)\n\nCoverage remained the same at 5.042% when pulling **c3afd0fd353a61b135f22f98f6b6b623383c6726 on MiniGod:correct-key-widths** into **8f37ccc8c3e5f378178a64b40fb6e63a98ebb8b1 on icebob:master**.\n","issue_id":1660429817116,"origin_id":471031315,"user_origin_id":2354108,"create_time":1552070276,"update_time":1563298123,"id":1665502099264,"updated_at":"2022-10-11T15:28:19.263000Z","created_at":"2022-10-11T15:28:19.263000Z"},{"_id":"63458b9309a35269b781101f","body":"Could you show screenshot about differences, I mean how it looks before & after PR.","issue_id":1660429817116,"origin_id":511701369,"user_origin_id":306521,"create_time":1563262370,"update_time":1563262370,"id":1665502099267,"updated_at":"2022-10-11T15:28:19.267000Z","created_at":"2022-10-11T15:28:19.267000Z"},{"_id":"63458b9309a35269b7811020","body":"Of course!\r\n\r\nmaster:\r\n\r\n\r\nthis pr:\r\n\r\n\r\nI just pushed a fix to set the `width` of `zero` so it is align with the other buttons. Width of `zero` is now 120 because it should be 3 times as big as the other buttons on that row (which have default width of 40).\r\n\r\nBefore this PR the width of `zero` was 130 to align with the other buttons, which must have been found by trial and error, rather than math, which is the point of this PR to solve.\r\n\r\nFor your convenience, here is a screenshot of this PR without changing the size of `zero`:\r\n\r\n\r\nNotice how the `zero` is too big. This might be considered a breaking change by some if they had custom layouts with `width` values to align with other buttons.","issue_id":1660429817116,"origin_id":511909296,"user_origin_id":60520,"create_time":1563297803,"update_time":1563297803,"id":1665502099270,"updated_at":"2022-10-11T15:28:19.270000Z","created_at":"2022-10-11T15:28:19.270000Z"},{"_id":"63458b9309a35269b7811021","body":"And this is how the normal keyboard changed.\r\n\r\n_Note: I have not changed any of the `width` properties of the buttons in the normal keyboard_\r\n\r\nmaster:\r\n\r\n\r\nthis pr:\r\n","issue_id":1660429817116,"origin_id":511912122,"user_origin_id":60520,"create_time":1563298275,"update_time":1563298275,"id":1665502099273,"updated_at":"2022-10-11T15:28:19.272000Z","created_at":"2022-10-11T15:28:19.272000Z"}]

Currently issue: When giving keys a custom size it can be hard to make them align correctly with the other lines, and the math doesn't add up. For instance, in...

MiniGod

Why just only HTMLInputElement for input?

[{"_id":"63458f546a9f94608c58cf96","body":"Fixed in #31 ","issue_id":1660429817122,"origin_id":471023788,"user_origin_id":60520,"create_time":1552068827,"update_time":1552068827,"id":1665503060993,"updated_at":"2022-10-11T15:44:20.993000Z","created_at":"2022-10-11T15:44:20.993000Z"}]

Why not also HTMLTextAreaElement?

simocheccoli

@touchstart event ?

[{"_id":"634593ebcd14df15ba5c7578","body":"Hi,\r\nI'm using it with different touch displays and the problem is that some touch driver generates only click event. So the better way is to handle both events and avoid duplicated events. Because from touch events the browser generates click event too.","issue_id":1660429817127,"origin_id":432725763,"user_origin_id":306521,"create_time":1540397916,"update_time":1540397916,"id":1665504235556,"updated_at":"2022-10-11T16:03:55.555000Z","created_at":"2022-10-11T16:03:55.555000Z"},{"_id":"634593ebcd14df15ba5c7579","body":"yeah, I see your point, will you accept a PR with this kind of change ?\r\n\r\nhttps:\/\/codesandbox.io\/s\/lxq814kp0l","issue_id":1660429817127,"origin_id":433037118,"user_origin_id":10137,"create_time":1540471700,"update_time":1540471700,"id":1665504235561,"updated_at":"2022-10-11T16:03:55.560000Z","created_at":"2022-10-11T16:03:55.560000Z"},{"_id":"634593ebcd14df15ba5c757a","body":"Yes, of course.\r\n\r\nBy the way, what is in the codesandbox link?","issue_id":1660429817127,"origin_id":433038111,"user_origin_id":306521,"create_time":1540471890,"update_time":1540471890,"id":1665504235564,"updated_at":"2022-10-11T16:03:55.563000Z","created_at":"2022-10-11T16:03:55.563000Z"},{"_id":"634593ebcd14df15ba5c757b","body":"Sorry I should have been more explicit:\r\n\r\n @touchstart=\"method\"\r\n @click=\"method\"\r\n\r\n...\r\n\r\n method(e) {\r\n e.preventDefault(); \/\/ prevents triggering click event when touchstart exists\r\n }\r\n","issue_id":1660429817127,"origin_id":433039123,"user_origin_id":10137,"create_time":1540472079,"update_time":1540472108,"id":1665504235566,"updated_at":"2022-10-11T16:03:55.566000Z","created_at":"2022-10-11T16:03:55.566000Z"},{"_id":"634593ebcd14df15ba5c757c","body":"OK.","issue_id":1660429817127,"origin_id":433040265,"user_origin_id":306521,"create_time":1540472301,"update_time":1540472301,"id":1665504235568,"updated_at":"2022-10-11T16:03:55.568000Z","created_at":"2022-10-11T16:03:55.568000Z"},{"_id":"634593ebcd14df15ba5c757d","body":"Any updates on this issue?","issue_id":1660429817127,"origin_id":469681290,"user_origin_id":16321132,"create_time":1551792908,"update_time":1551792908,"id":1665504235572,"updated_at":"2022-10-11T16:03:55.571000Z","created_at":"2022-10-11T16:03:55.571000Z"}]

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...

ghost

Key auto-repeat support

[]

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...

isaacsutherland

Issue adding decimal numbers

[{"_id":"634590698402fb318b70bc01","body":"I know it's been a while, but for anyone else the message will go away if you update your input to `type=\"text\"`.","issue_id":1660429817134,"origin_id":415990176,"user_origin_id":3801560,"create_time":1535224109,"update_time":1535224109,"id":1665503337367,"updated_at":"2022-10-11T15:48:57.367000Z","created_at":"2022-10-11T15:48:57.367000Z"}]

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: >...

martinbean

useKbEvents doesn't trigger v-model update

[{"_id":"6345931e8402fb318b70be1a","body":"My solution was to create a `:change` trigger, and in that trigger, tell the input to fire an input event:\r\n```\r\n this.$refs.keyboard.input.dispatchEvent(new Event('input', { bubbles: true }));\r\n```","issue_id":1660429817138,"origin_id":319036467,"user_origin_id":1386403,"create_time":1501498937,"update_time":1501498937,"id":1665504030820,"updated_at":"2022-10-11T16:00:30.819000Z","created_at":"2022-10-11T16:00:30.819000Z"},{"_id":"6345931e8402fb318b70be1c","body":"v-model not work with this keyboard","issue_id":1660429817138,"origin_id":319366780,"user_origin_id":11346064,"create_time":1501593411,"update_time":1501593411,"id":1665504030827,"updated_at":"2022-10-11T16:00:30.827000Z","created_at":"2022-10-11T16:00:30.827000Z"},{"_id":"6345931e8402fb318b70be1d","body":"the solution proposed by @nicksahler just works - thank you! i am using it like this (not with $refs):\r\n\r\n`<vue-touch-keyboard v-if=\"keyboard.visible\" :layout=\"keyboard.layout\" :input=\"keyboard.input\" :change=\"manualDispatch\"\/>`\r\n\r\n```\r\nmethods: {\r\n manualDispatch () {\r\n this.keyboard.input.dispatchEvent(new Event('input', { bubbles: true }));\r\n }\r\n}\r\n```","issue_id":1660429817138,"origin_id":333132899,"user_origin_id":1985054,"create_time":1506693326,"update_time":1506693326,"id":1665504030834,"updated_at":"2022-10-11T16:00:30.833000Z","created_at":"2022-10-11T16:00:30.833000Z"},{"_id":"6345931e8402fb318b70be1f","body":"Another example with different var names using @nicksahler solution and working\r\n\r\n```\r\n<vue-touch-keyboard v-if=\"kbVisible\"\r\n :layout=\"kbLayout\"\r\n :cancel=\"kbHide\"\r\n :accept=\"kbAccept\"\r\n :input=\"kbInput\"\r\n :change=\"manualDispatch\"\/>\r\n\r\nkbShow(e) {\r\n this.kbInput = e.target;\r\n this.kbLayout = e.target.dataset.layout;\r\n\r\n if (!this.kbVisible)\r\n this.kbVisible = true;\r\n }\r\n\r\n manualDispatch () {\r\n this.kbInput.dispatchEvent(new Event('input', { bubbles: true }));\r\n }\r\n```\r\n\r\nthanks\r\n","issue_id":1660429817138,"origin_id":373362362,"user_origin_id":20064912,"create_time":1521117655,"update_time":1521117681,"id":1665504030839,"updated_at":"2022-10-11T16:00:30.839000Z","created_at":"2022-10-11T16:00:30.839000Z"},{"_id":"6345931e8402fb318b70be20","body":"Should someone submit a pull request for this or should this be left for manual implementation? I had to do the same thing, regardless of the `useKbEvents` value.","issue_id":1660429817138,"origin_id":395617321,"user_origin_id":1464185,"create_time":1528421485,"update_time":1528421485,"id":1665504030843,"updated_at":"2022-10-11T16:00:30.843000Z","created_at":"2022-10-11T16:00:30.843000Z"}]

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...

SteveJay7

Add a "gap" capability

[]

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...

trajano

How can prevent event bubble to trigger android's keyboard

[{"_id":"634592486a9f94608c58d183","body":"I think, you can't. I developed it for Raspberry PI, where there is no built-in virtual keyboard.","issue_id":1660429817144,"origin_id":348888525,"user_origin_id":306521,"create_time":1512374956,"update_time":1512374956,"id":1665503816767,"updated_at":"2022-10-11T15:56:56.766000Z","created_at":"2022-10-11T15:56:56.766000Z"}]

as title , When I assign foucs or click event to input , but It will trigger andorid's keyboard . How can I prevent it.

aloha1003

How to style on keypress

[{"_id":"63458da509a35269b7811182","body":"Which browser?","issue_id":1660429817148,"origin_id":314173269,"user_origin_id":306521,"create_time":1499706912,"update_time":1499706912,"id":1665502629893,"updated_at":"2022-10-11T15:37:09.893000Z","created_at":"2022-10-11T15:37:09.893000Z"},{"_id":"63458da509a35269b7811183","body":"chrome","issue_id":1660429817148,"origin_id":314174573,"user_origin_id":5864695,"create_time":1499707202,"update_time":1499707202,"id":1665502629897,"updated_at":"2022-10-11T15:37:09.897000Z","created_at":"2022-10-11T15:37:09.897000Z"},{"_id":"63458da509a35269b7811184","body":"I tried, but I don't find error with focus. When I'm writing to input it doesn't lost focus. (in Chrome)","issue_id":1660429817148,"origin_id":314179135,"user_origin_id":306521,"create_time":1499708209,"update_time":1499708209,"id":1665502629900,"updated_at":"2022-10-11T15:37:09.900000Z","created_at":"2022-10-11T15:37:09.900000Z"},{"_id":"63458da509a35269b7811185","body":"Try clicking on the keyboard only. When I use my keyboard, the input does not lose focus either, but when actually I click on the letters, it loses focus for a second.","issue_id":1660429817148,"origin_id":314180134,"user_origin_id":5864695,"create_time":1499708433,"update_time":1499708433,"id":1665502629903,"updated_at":"2022-10-11T15:37:09.902000Z","created_at":"2022-10-11T15:37:09.902000Z"}]

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...

kelleysy