├── .gitignore ├── .jshintrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── bower.json ├── css └── angular-virtual-keyboard.css ├── demo ├── demo.png ├── index.html ├── keyboard.png └── vki.html ├── gulpfile.js ├── package.json ├── release ├── angular-virtual-keyboard.css ├── angular-virtual-keyboard.js └── angular-virtual-keyboard.min.js ├── src ├── angular-virtual-keyboard.js ├── vki-core.js ├── vki-deadkeys.js └── vki-layouts.js └── vki ├── keyboard.css ├── keyboard.js ├── keyboard.png └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": false, 6 | "camelcase": true, 7 | "curly": false, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "latedef": true, 11 | "newcap": true, 12 | "noarg": true, 13 | "quotmark": "single", 14 | "regexp": true, 15 | "undef": true, 16 | "unused": true, 17 | "strict": false, 18 | "trailing": true, 19 | "smarttabs": false, 20 | "expr": true, 21 | "globals": { 22 | "angular": true 23 | }, 24 | "predef": [ 25 | "define", 26 | "require", 27 | "exports", 28 | "module", 29 | "describe", 30 | "before", 31 | "beforeEach", 32 | "after", 33 | "afterEach", 34 | "it", 35 | "StringMask", 36 | "BrV" 37 | ], 38 | "indent": 4, 39 | "maxlen": 120, 40 | "devel": false, 41 | "noempty": true 42 | } 43 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 2 | ### 0.4.3 (2015-11-19) 3 | 4 | 5 | #### Bug Fixes 6 | 7 | * **VKI_insert:** trim button text before insert in the input field ([52956b40](https://github.com/the-darc/angular-virtual-keyboard/commit/52956b40)) 8 | * **bower:** include css in main section of bower ([05e9899](https://github.com/the-darc/angular-virtual-keyboard/commit/05e9899)) 9 | * **UAParser:** Windows Phone added to supported mobile platforms ([9143622](https://github.com/the-darc/angular-virtual-keyboard/commit/9143622)) 10 | 11 | #### Features 12 | 13 | * **custom-class:** add support to custom-class configuration ([b2477cd5](https://github.com/the-darc/angular-virtual-keyboard/commit/b2477cd5)) 14 | 15 | 16 | 17 | ### 0.4.2 (2015-07-21) 18 | 19 | 20 | #### Bug Fixes 21 | 22 | * **VKI_CONFIG:** exposes sizeAdj configuration (issue #13) ([37e5230f](https://github.com/the-darc/angular-virtual-keyboard/commit/37e5230f)) 23 | * **auto-close:** auto-close others VKIs when a new one is focused (issue #10) ([8bf63d74](https://github.com/the-darc/angular-virtual-keyboard/commit/8bf63d74)) 24 | * **focus:** keep input focus when keyboard buttons (like shift, alt, caps, and others..) are ([f3b4f3c0](https://github.com/the-darc/angular-virtual-keyboard/commit/f3b4f3c0)) 25 | 26 | 27 | 28 | ### 0.4.1 (2015-05-11) 29 | 30 | 31 | #### Bug Fixes 32 | 33 | * - VKI doesn't work on input of type "email" in Chrome ([919db74b](https://github.com/the-darc/angular-virtual-keyboard/commit/919db74b), closes [#8](https://github.com/the-darc/angular-virtual-keyboard/issues/8)) 34 | * **position:** fix relative position directive instance configuration ([9c6a655e](https://github.com/the-darc/angular-virtual-keyboard/commit/9c6a655e)) 35 | 36 | 37 | 38 | ## 0.4.0 (2015-04-01) 39 | 40 | 41 | #### Features 42 | 43 | * **position:** add support to place the virtual keyboard fixed in the bottom of page ([e681fb13](https://github.com/the-darc/angular-virtual-keyboard/commit/e681fb13)) 44 | 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Daniel Campos 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular-virtual-keyboard 2 | ======================== 3 | [![npm version](https://badge.fury.io/js/angular-virtual-keyboard.svg)](http://badge.fury.io/js/angular-virtual-keyboard) 4 | [![Bower version](https://badge.fury.io/bo/angular-virtual-keyboard.svg)](http://badge.fury.io/bo/angular-virtual-keyboard) 5 | 6 | An AngularJs Virtual Keyboard Interface based on [GreyWyvern VKI](http://www.greywyvern.com/code/javascript/keyboard). See example in the [Demo page](http://the-darc.github.io/angular-virtual-keyboard). 7 | 8 | ![Demo image](http://the-darc.github.io/angular-virtual-keyboard/images/demo.png) 9 | 10 | ## Install 11 | 12 | ### With bower 13 | 14 | ```sh 15 | $ bower install angular-virtual-keyboard 16 | ``` 17 | 18 | ### With npm 19 | 20 | ```sh 21 | $ npm install angular-virtual-keyboard 22 | ``` 23 | 24 | ## Dependencies 25 | 26 | - Optional: [angular-useragent-parser](https://github.com/the-darc/angular-useragent-parser) 27 | _Obs.: Required to auto-hide the keyboard interface in mobile devices or to use the 'vk-force-mobile' configuration._ 28 | 29 | ## Usage 30 | 31 | 1. Import the ```angular-virtual-keyboard.min.js``` script in your page. 32 | 33 | 2. Include the module ```angular-virtual-keyboard``` in your angular app. 34 | 35 | 3. Include the module ```angular-useragent-parser``` in your angular app. _Optional, used to auto hide the virtual keyboard interface in mobile devices._ 36 | 37 | 4. Use the 'ng-virtual-keyboard' directive in any text fields, password fields or textareas: 38 | 39 | ```html 40 | 41 | ``` 42 | 43 | ## Supported Configurations 44 | 45 | ### Directive global configurations 46 | 47 | The angular-virtual-keyboard module use an [Angular.js Constant](https://docs.angularjs.org/api/auto/service/$provide#constant) named ``VKI_CONFIG`` to handle the configurations that will be applied to all instances of the ``ng-virtual-keyboard`` directive. See list below: 48 | 49 | - __Keyboard layouts configurations__ ``VKI_CONFIG.layout`` Array of Keyboard Layout configurations. See [vki-layouts.js](https://github.com/the-darc/angular-virtual-keyboard/blob/master/src/vki-layouts.js) for keyboard layout configuration examples. 50 | - __Deadkeys configurations__ ``VKI_CONFIG.deadkey`` Array of Deadkeys configurations. See [vki-deadkeys.js](https://github.com/the-darc/angular-virtual-keyboard/blob/master/src/vki-deadkeys.js) for deadkeys configuration examples. 51 | - __Default keyboard layout__ ``VKI_CONFIG.kt`` Name of the layout configuration to be used as default (if no specific layout configuration is provided in the directive instance configuration). _Default: 'US International'_ 52 | - __Relative position__ ``VKI_CONFIG.relative`` Use ``true`` to position the keyboard next to the input, ``false`` to place in the bottom of page. _Default: ``true``_ 53 | - __Adjust keyboard size__ ``VKI_CONFIG.sizeAdj`` Allow user to adjust keyboard size. _Default: ``true``_ 54 | - __i18n configuration__ ``VKI_CONFIG.i18n`` An array to replace the default labels of the keyboard interface. See example below: 55 | - __Custom CSS Class__ ``VKI_CONFIG.customClass`` A CSS class name to add in the first html element of the keyboard 56 | ```javascript 57 | VKI_CONFIG.i18n = { 58 | '00': "Exibir teclado numérico", 59 | '01': "Exibir teclado virtual", 60 | '02': "Selecionar layout do teclado", 61 | '03': "Teclas mortas", 62 | '04': "Ligado", 63 | '05': "Desligado", 64 | '06': "Fechar teclado", 65 | '07': "Limpar", 66 | '08': "Limpar campo", 67 | '09': "Versão", 68 | '10': "Diminuir tamanho do teclado", 69 | '11': "Aumentar tamanho do teclado" 70 | }; 71 | ``` 72 | 73 | ### Directive instance configurations 74 | 75 | The ``ng-virtual-keyboard`` could receive an array with the configurations that will be applied to the keyboard interface instance of the input field. See list below: 76 | 77 | - __Default keyboard layout__ ``kt`` Change the default keyboard which displays first for each directive instance. _Default: Defined in global configuration_ 78 | - __Dead keys__ ``deadkeysOn`` To turn dead keys on or off by default. _Default: true_ 79 | - __Number pad__ ``numberPad`` To enable de number pad button. _Default: false_ 80 | - __VKI Version__ ``showVersion`` To show the VKI-core based version. _Default: false_ 81 | - __Imageless mode__ ``imageURI`` By default the keyboard will be show on input field focus. Pass a image URI to add a clickable image next to inputs and replace the on focus default behavior. _Default: false_ 82 | - __Show in mobile__ ``showInMobile`` True to display the interface on mobiles devices. _Default: false_ 83 | - __Foce position__ ``forcePosition`` Force to position the virtual keyborad above (_use ``"top"``_) or below (_use ``"bottom"``_) the input field. Use ``false`` to let the directive choose the better position. _Default: false_ 84 | - __Enter callback__ ``enterSubmit`` Define a callback function for the enter key. Use ~~true to submit forms when Enter is pressed or~~ a function to execute a custom function. _Default: false_ (See _[enterSubmit issues #5](https://github.com/the-darc/angular-virtual-keyboard/issues/5)_) 85 | - __Relative position__ ``relative`` Use ``true`` to position the keyboard next to the input, and ``false`` to place in the bottom of page. _Default: ``true``_ 86 | - __Keyboard size control__ ``size`` Five sizes based on font-size have been pre-programmed: 13px, 16px (default), 20px, 24px and 28px; corresponding to the sizes 1 to 5 respectively. _Default: 3_ 87 | - __Adjust keyboard size__ ``sizeAdj`` Allow user to adjust keyboard size. _Default: ``true``_ 88 | - __Custom CSS Class__ ``customClass`` A CSS class name to add in the first html element of the keyboard 89 | 90 | ### Example of use 91 | 92 | _See example in the [Demo page](http://the-darc.github.io/angular-virtual-keyboard) or the [demo code](https://github.com/the-darc/angular-virtual-keyboard/blob/master/demo/index.html)_ 93 | 94 | ## License 95 | 96 | The MIT License (MIT) 97 | 98 | Copyright (c) 2015 Daniel Campos 99 | 100 | Permission is hereby granted, free of charge, to any person obtaining a copy 101 | of this software and associated documentation files (the "Software"), to deal 102 | in the Software without restriction, including without limitation the rights 103 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 104 | copies of the Software, and to permit persons to whom the Software is 105 | furnished to do so, subject to the following conditions: 106 | 107 | The above copyright notice and this permission notice shall be included in all 108 | copies or substantial portions of the Software. 109 | 110 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 111 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 112 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 113 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 114 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 115 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 116 | SOFTWARE. 117 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-virtual-keyboard", 3 | "version": "0.4.3", 4 | "homepage": "https://github.com/the-darc/angular-virtual-keyboard", 5 | "author": "the-darc ", 6 | "description": "An AngularJs Virtual Keyboard Interface based on GreyWyvern VKI", 7 | "main": [ 8 | "release/angular-virtual-keyboard.min.js", 9 | "release/angular-virtual-keyboard.css" 10 | ], 11 | "keywords": [ 12 | "Keyboard", 13 | "Virtual", 14 | "VKI" 15 | ], 16 | "license": "MIT", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "vki", 22 | "src", 23 | "demo", 24 | "css", 25 | "gulpfile.js" 26 | ], 27 | "dependencies": {}, 28 | "devDependencies": { 29 | "angular-useragent-parser": "~0.1.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /css/angular-virtual-keyboard.css: -------------------------------------------------------------------------------- 1 | table.keyboardInputMaster { 2 | position:absolute; 3 | font:normal 16px Arial,sans-serif; 4 | border-top:1px solid #eeeeee; 5 | border-right:1px solid #888888; 6 | border-bottom:1px solid #444444; 7 | border-left:1px solid #cccccc; 8 | -webkit-box-shadow:0px 2px 10px #444444; 9 | -moz-box-shadow:0px 2px 10px #444444; 10 | box-shadow:0px 2px 10px #444444; 11 | opacity:0.95; 12 | filter:alpha(opacity=95); 13 | background-color:#dddddd; 14 | text-align:left; 15 | z-index:1000000; 16 | width:auto; 17 | height:auto; 18 | min-width:0; 19 | min-height:0; 20 | margin:0px; 21 | padding:0px; 22 | line-height:normal; 23 | -moz-user-select:none; 24 | cursor:default; 25 | } 26 | table.keyboardInputMaster { 27 | -webkit-border-top-left-radius:0.6em; 28 | -webkit-border-top-right-radius:0.6em; 29 | -moz-border-top-left-radius:0.6em; 30 | -moz-border-top-right-radius:0.6em; 31 | border-top-left-radius:0.6em; 32 | border-top-right-radius:0.6em; 33 | } 34 | table.keyboardInputMaster.relativeKeyboard { 35 | -webkit-border-radius:0.6em; 36 | -moz-border-radius:0.6em; 37 | border-radius:0.6em; 38 | } 39 | 40 | table.keyboardInputMaster * { 41 | position:static; 42 | color:#000000; 43 | background:transparent; 44 | font:normal 16px Arial,sans-serif; 45 | width:auto; 46 | height:auto; 47 | min-width:0; 48 | min-height:0; 49 | margin:0px; 50 | padding:0px; 51 | border:0px none; 52 | outline:0px; 53 | vertical-align:baseline; 54 | line-height:1.3em; 55 | } 56 | table.keyboardInputMaster table { 57 | table-layout:auto; 58 | } 59 | table.keyboardInputMaster.keyboardInputSize1, 60 | table.keyboardInputMaster.keyboardInputSize1 * { 61 | font-size:13px; 62 | } 63 | table.keyboardInputMaster.keyboardInputSize3, 64 | table.keyboardInputMaster.keyboardInputSize3 * { 65 | font-size:20px; 66 | } 67 | table.keyboardInputMaster.keyboardInputSize4, 68 | table.keyboardInputMaster.keyboardInputSize4 * { 69 | font-size:24px; 70 | } 71 | table.keyboardInputMaster.keyboardInputSize5, 72 | table.keyboardInputMaster.keyboardInputSize5 * { 73 | font-size:28px; 74 | } 75 | 76 | table.keyboardInputMaster thead tr th { 77 | padding:0.3em 0.3em 0.1em 0.3em; 78 | background-color:#999999; 79 | white-space:nowrap; 80 | text-align:right; 81 | } 82 | table.keyboardInputMaster thead tr th { 83 | -webkit-border-radius:0.6em 0.6em 0px 0px; 84 | -moz-border-radius:0.6em 0.6em 0px 0px; 85 | border-radius:0.6em 0.6em 0px 0px; 86 | } 87 | table.keyboardInputMaster thead tr th div { 88 | float:left; 89 | font-size:130% !important; 90 | height:1.3em; 91 | font-weight:bold; 92 | position:relative; 93 | z-index:1; 94 | margin-right:0.5em; 95 | cursor:pointer; 96 | background-color:transparent; 97 | } 98 | table.keyboardInputMaster thead tr th div ol { 99 | position:absolute; 100 | left:0px; 101 | top:90%; 102 | list-style-type:none; 103 | height:9.4em; 104 | overflow-y:auto; 105 | overflow-x:hidden; 106 | background-color:#f6f6f6; 107 | border:1px solid #999999; 108 | display:none; 109 | text-align:left; 110 | width:12em; 111 | } 112 | table.keyboardInputMaster thead tr th div ol li { 113 | padding:0.2em 0.4em; 114 | cursor:pointer; 115 | white-space:nowrap; 116 | width:12em; 117 | } 118 | table.keyboardInputMaster thead tr th div ol li.selected { 119 | background-color:#ffffcc; 120 | } 121 | table.keyboardInputMaster thead tr th div ol li:hover, 122 | table.keyboardInputMaster thead tr th div ol li.hover { 123 | background-color:#dddddd; 124 | } 125 | table.keyboardInputMaster thead tr th span, 126 | table.keyboardInputMaster thead tr th strong, 127 | table.keyboardInputMaster thead tr th small, 128 | table.keyboardInputMaster thead tr th big { 129 | display:inline-block; 130 | padding:0px 0.4em; 131 | height:1.4em; 132 | line-height:1.4em; 133 | border-top:1px solid #e5e5e5; 134 | border-right:1px solid #5d5d5d; 135 | border-bottom:1px solid #5d5d5d; 136 | border-left:1px solid #e5e5e5; 137 | background-color:#cccccc; 138 | cursor:pointer; 139 | margin:0px 0px 0px 0.3em; 140 | -webkit-border-radius:0.3em; 141 | -moz-border-radius:0.3em; 142 | border-radius:0.3em; 143 | vertical-align:middle; 144 | -webkit-transition:background-color .15s ease-in-out; 145 | -o-transition:background-color .15s ease-in-out; 146 | transition:background-color .15s ease-in-out; 147 | } 148 | table.keyboardInputMaster thead tr th strong { 149 | font-weight:bold; 150 | } 151 | table.keyboardInputMaster thead tr th small { 152 | -webkit-border-radius:0.3em 0px 0px 0.3em; 153 | -moz-border-radius:0.3em 0px 0px 0.3em; 154 | border-radius:0.3em 0px 0px 0.3em; 155 | border-right:1px solid #aaaaaa; 156 | padding:0px 0.2em 0px 0.3em; 157 | } 158 | table.keyboardInputMaster thead tr th big { 159 | -webkit-border-radius:0px 0.3em 0.3em 0px; 160 | -moz-border-radius:0px 0.3em 0.3em 0px; 161 | border-radius:0px 0.3em 0.3em 0px; 162 | border-left:0px none; 163 | margin:0px; 164 | padding:0px 0.3em 0px 0.2em; 165 | } 166 | table.keyboardInputMaster thead tr th span:hover, 167 | table.keyboardInputMaster thead tr th span.hover, 168 | table.keyboardInputMaster thead tr th strong:hover, 169 | table.keyboardInputMaster thead tr th strong.hover, 170 | table.keyboardInputMaster thead tr th small:hover, 171 | table.keyboardInputMaster thead tr th small.hover, 172 | table.keyboardInputMaster thead tr th big:hover, 173 | table.keyboardInputMaster thead tr th big.hover { 174 | background-color:#dddddd; 175 | } 176 | 177 | table.keyboardInputMaster tbody tr td { 178 | text-align:left; 179 | padding:0.2em 0.3em 0.3em 0.3em; 180 | vertical-align:top; 181 | } 182 | table.keyboardInputMaster tbody tr td div { 183 | text-align:center; 184 | position:relative; 185 | zoom:1; 186 | } 187 | table.keyboardInputMaster tbody tr td table { 188 | white-space:nowrap; 189 | width:100%; 190 | border-collapse:separate; 191 | border-spacing:0px; 192 | } 193 | table.keyboardInputMaster tbody tr td.keyboardInputNumpad table { 194 | margin-left:0.2em; 195 | width:auto; 196 | } 197 | table.keyboardInputMaster tbody tr td table.keyboardInputCenter { 198 | width:auto; 199 | margin:0px auto; 200 | } 201 | 202 | table.keyboardInputMaster tbody tr td table tbody tr td { 203 | vertical-align:middle; 204 | padding:0px 0.45em; 205 | white-space:pre; 206 | height:1.8em; 207 | font-family:'Lucida Console','Arial Unicode MS',monospace; 208 | border-top:1px solid #e5e5e5; 209 | border-right:1px solid #5d5d5d; 210 | border-bottom:1px solid #5d5d5d; 211 | border-left:1px solid #e5e5e5; 212 | background-color:#eeeeee; 213 | cursor:default; 214 | min-width:0.75em; 215 | -webkit-border-radius:0.2em; 216 | -moz-border-radius:0.2em; 217 | border-radius:0.2em; 218 | -webkit-transition:background-color .15s ease-in-out; 219 | -o-transition:background-color .15s ease-in-out; 220 | transition:background-color .15s ease-in-out; 221 | } 222 | table.keyboardInputMaster.relativeKeyboard tbody tr td table tbody tr td.last { 223 | width:99%; 224 | } 225 | table.keyboardInputMaster tbody tr td table tbody tr td.space { 226 | padding:0px 4em; 227 | } 228 | table.keyboardInputMaster tbody tr td table tbody tr td.deadkey { 229 | background-color:#ccccdd; 230 | } 231 | table.keyboardInputMaster tbody tr td table tbody tr td.target { 232 | background-color:#ddddcc; 233 | } 234 | table.keyboardInputMaster tbody tr td table tbody tr td:hover, 235 | table.keyboardInputMaster tbody tr td table tbody tr td.hover { 236 | border-top:1px solid #d5d5d5; 237 | border-right:1px solid #555555; 238 | border-bottom:1px solid #555555; 239 | border-left:1px solid #d5d5d5; 240 | background-color:#cccccc; 241 | } 242 | table.keyboardInputMaster thead tr th span:active, 243 | table.keyboardInputMaster thead tr th span.pressed, 244 | table.keyboardInputMaster tbody tr td table tbody tr td:active, 245 | table.keyboardInputMaster tbody tr td table tbody tr td.pressed { 246 | border-top:1px solid #555555 !important; 247 | border-right:1px solid #d5d5d5; 248 | border-bottom:1px solid #d5d5d5; 249 | border-left:1px solid #555555; 250 | background-color:#cccccc; 251 | } 252 | 253 | table.keyboardInputMaster tbody tr td table tbody tr td small { 254 | display:block; 255 | text-align:center; 256 | font-size:0.6em !important; 257 | line-height:1.1em; 258 | } 259 | 260 | table.keyboardInputMaster tbody tr td div label { 261 | position:absolute; 262 | bottom:0.2em; 263 | left:0.3em; 264 | } 265 | table.keyboardInputMaster tbody tr td div label input { 266 | background-color:#f6f6f6; 267 | vertical-align:middle; 268 | font-size:inherit; 269 | width:1.1em; 270 | height:1.1em; 271 | } 272 | table.keyboardInputMaster tbody tr td div var { 273 | position:absolute; 274 | bottom:0px; 275 | right:3px; 276 | font-weight:bold; 277 | font-style:italic; 278 | color:#444444; 279 | } 280 | 281 | .keyboardInputInitiator { 282 | margin:0px 3px; 283 | vertical-align:middle; 284 | cursor:pointer; 285 | } 286 | 287 | .keyboardsArea table { 288 | max-width: 1000px; 289 | margin-left: auto; 290 | margin-right: auto; 291 | } 292 | -------------------------------------------------------------------------------- /demo/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/the-darc/angular-virtual-keyboard/cfa01fa49711621524c8b5bb4f445d0a137dc7c8/demo/demo.png -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular Virtual Keyboard Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 55 | 56 | 57 |
58 | 59 |

Angular Virtual Keyboard

60 | 61 |

62 |

Default configuration

63 | 64 |

Keyboard binded by directive attribute:

65 |
66 |
67 | (Model value: {{t02}}) 68 |
69 | 70 |

71 | 72 |

Custom configurations

73 | 74 |

Keyboard layout: Português Brasileiro

75 |
76 |
77 | (Model value: {{t03}}) 78 |
79 | 80 |

Show keyboard language selection

81 |
82 |
83 | (Model value: {{t04}}) 84 |
85 | 86 |

Show deadKeys off by default

87 |
88 |
89 | (Model value: {{t05}}) 90 |
91 | 92 |

Force position: top

93 |
94 |
95 | (Model value: {{t012}}) 96 |
97 | 98 |

Force position: bottom

99 |
100 |
101 | (Model value: {{t013}}) 102 |
103 | 104 |

Enable number pad

105 |
106 |
107 | (Model value: {{t006}}) 108 |
109 | 110 |

Show version number

111 |
112 |
113 | (Model value: {{t007}}) 114 |
115 | 116 |

Use keyboard button action

117 |
118 |
119 | (Model value: {{t008}}) 120 |
121 | 122 |

Keyboard default size: 5

123 |
124 |
125 | (Model value: {{t009}}) 126 |
127 | 128 |

Forced to show in mobile devices

129 |
130 |
131 | (Model value: {{t010}}) 132 |
133 | 134 |

Customized numeric keyboard layout

135 |
136 |
137 | (Model value: {{t011}}) 138 |
139 | 140 |

E-mail field

141 |
142 |
143 | (Model value: {{t012}}) 144 |
145 | 146 |

Textarea fields

147 |
148 |