
Security News
Django Joins curl in Pushing Back on AI Slop Security Reports
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.
angular-material-keyboard
Advanced tools
Onscreen virtual keyboard for Angular (https://angularjs.org/) using Material (https://material.angularjs.org/)inspired by the Angular Virtual Keyboard by the-darc (https://github.com/the-darc/angular-virtual-keyboard).
Onscreen virtual keyboard for Angular using Angular Material and the Angular Virtual Keyboard by the-darc based on GreyWyvern VKI.
Checkout the demo.html
<script src="angular-material-keyboard/dist/mdKeyboard.min.js"></script>
<link rel="stylesheet" href="angular-material-keyboard/dist/mdKeyboard.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Material+Icons">
'use strict';
angular
.module('myApp', [
'ngAria',
'ngAnimate',
'ngMaterial',
'material.components.keyboard'
]);
input
, textarea
and md-autocomplete
<form name="myForm">
<md-input-container>
<input type="text"
use-keyboard="Deutsch"
ng-model="myModel">
</md-input-container>
</form>
Use the mdKeyboardProvider
to set your default layout or to add custom layouts:
'use strict';
angular
.module('myApp')
.config(function ($mdKeyboardProvider) {
// add layout for number fields
$mdKeyboardProvider.addLayout('Numbers', {
'name': 'Numbers', 'keys': [
[['7', '7'], ['8', '8'], ['9', '9'], ['Bksp', 'Bksp']],
[['4', '4'], ['5', '5'], ['6', '6'], ['-', '-']],
[['1', '1'], ['2', '2'], ['3', '3'], ['+', '+']],
[['0', '0'], ['Spacer'], [','], ['Enter', 'Enter']]
], 'lang': ['de']
});
// default layout is german
$mdKeyboardProvider.defaultLayout('Deutsch');
});
The first entry in each 'key' array is the default char. The second is used when pressing 'shift' or 'caps lock', the third when 'alt' is rpessed.
You can use the spacer
key to provide a gap in the layout.
The $mdKeyboardProvider
has the following methods:
getLayout(layout:string):object
will give you the corresponding layout
getCurrentLayout():string
will give you the current used layout
getLayouts():array
returns all registered layouts
defaultLayout(layout:string):void
tells the directive which layout to use as default
useLayout(layout:string):void
tells the directive which layout to use
addLayout(layout:string, keys:array):void
expects the name of a new layout to register along an 'keys' array
isVisible():boolean
returns wether the keyboard is currently visible or not
$ npm install && bower install
$ gulp build
FAQs
Onscreen virtual keyboard for Angular (https://angularjs.org/) using Material (https://material.angularjs.org/)inspired by the Angular Virtual Keyboard by the-darc (https://github.com/the-darc/angular-virtual-keyboard).
The npm package angular-material-keyboard receives a total of 5 weekly downloads. As such, angular-material-keyboard popularity was classified as not popular.
We found that angular-material-keyboard demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Django has updated its security policies to reject AI-generated vulnerability reports that include fabricated or unverifiable content.
Security News
ECMAScript 2025 introduces Iterator Helpers, Set methods, JSON modules, and more in its latest spec update approved by Ecma in June 2025.
Security News
A new Node.js homepage button linking to paid support for EOL versions has sparked a heated discussion among contributors and the wider community.