{"id":18332497,"url":"https://github.com/cellular/touch-keyboard","last_synced_at":"2025-04-09T18:35:45.807Z","repository":{"id":57378346,"uuid":"120486156","full_name":"cellular/touch-keyboard","owner":"cellular","description":"Virtual on-screen keyboard","archived":false,"fork":false,"pushed_at":"2018-02-06T16:52:22.000Z","size":86,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-24T14:19:08.305Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cellular.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-06T16:16:11.000Z","updated_at":"2021-11-19T23:12:47.000Z","dependencies_parsed_at":"2022-09-26T16:41:30.326Z","dependency_job_id":null,"html_url":"https://github.com/cellular/touch-keyboard","commit_stats":null,"previous_names":["fgnass/touch-keyboard"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cellular%2Ftouch-keyboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cellular%2Ftouch-keyboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cellular%2Ftouch-keyboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cellular%2Ftouch-keyboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cellular","download_url":"https://codeload.github.com/cellular/touch-keyboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248088543,"owners_count":21045736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T19:39:14.047Z","updated_at":"2025-04-09T18:35:45.789Z","avatar_url":"https://github.com/cellular.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Touch Keyboard\n\nVirtual on-screen keyboard for digital signage screens.\n\n![screenshot](https://raw.githubusercontent.com/fgnass/touch-keyboard/master/screenshot.jpg)\n\nThe keyboard will show up whenever an input field (or textarea) is focused.\n\nThe keyboard is framework agnostic and works with any frontend technology, including React.\n\n## Configuration\n\nYou can customize the keyboard layout as well as the look and feel by setting `window.touchKeyboard = {...}`.\n\n```js\nwindow.touchKeyboard = {\n  layout: {\n    abc: [\n      ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'backspace'],\n      ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'enter'],\n      ['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '!', '?', 'shift'],\n      ['num', '/', 'space', '.'],\n    ],\n  },\n};\n```\n\nDark theme:\n\n```js\nwindow.touchKeyboard = {\n  style: {\n    keyboard: {\n      background: '#111',\n    },\n    key: {\n      background: '#333',\n      color: '#ddd',\n      fontSize: '.35em',\n      fontWeight: 300,\n      textShadow: '0 -1px 0 #000',\n    },\n  },\n};\n```\n\n![dark theme](https://raw.githubusercontent.com/fgnass/touch-keyboard/master/dark.jpg)\n\nYou can also style individual keys. The following code is taken from the [default config](https://github.com/fgnass/touch-keyboard/blob/master/src/defaults.js) and makes the shift and backspace keys twice was wide (regular keys are 1em wide):\n\n```js\nwindow.touchKeyboard = {\n  keys: {      \n    shift: {\n      width: '2em',\n      justifyContent:  'flex-start',\n    },\n    backspace: {\n      width: '2em',\n      justifyContent: 'flex-end',\n    },\n    space: {\n      width: '7em',        \n    },\n  },\n};\n```\n\n## Implememtation Notes\n\nIf the input is located near the bottom of the screen the whole page is moved upwards so that the keyboard doesn't hide the text field. As translating the whole html or body element does not work as expected, the script uses your app's topmost container element instead.\n\nText is inserted/deleted using th [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) API. This does not trigger any key events whereas input/change will fire as expected.\n\n\n# License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcellular%2Ftouch-keyboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcellular%2Ftouch-keyboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcellular%2Ftouch-keyboard/lists"}