# Digital Keyboard
[](https://travis-ci.org/simbawus/DigitalKeyboard)
[](https://coveralls.io/github/simbawus/DigitalKeyboard?branch=master)
[](https://www.npmjs.com/package/digital-keyboard)
[](https://www.npmjs.com/package/digital-keyboard)
[](https://github.com/simbawus/DigitalKeyboard/blob/master/LICENSE)
###### [中文README](README-zh_CN.md)
- Develop with native javascript, doesn't rely on any frameworks and libraries.
- Support ID card, mobile number, integer, decimal, etc.
- Easy API, easy use.
- Development summary：[How to release a npm package](https://github.com/simbawus/blog/issues/12).
[](https://i.loli.net/2018/05/16/5afc5086957b3.gif)
## Type
decimal
|
integer/phone
|
idcard
|
## PropTypes
| Property | Type | Default | Description |
| :------------ | :------- | :------ | :--------------------------------------- |
| el | DOM | | parent node |
| className | String | | additonal class to control keyboard's style |
| type | String | decimal | decimal，integer，phone，idcard |
| language | String | chinese | chinese，english |
| inputValue | Function | | return keyboard value |
| integerDigits | Number | | limit integer digits |
| decimalDigits | Number | | limit decimal digits |
## Getting Started
### Install
```shell
yarn add digital-keyboard --dev
```
### Usage Example
- **Native JavaScript**
```html
Digital Keyboard
```
```javascript
//digitalKeyboard.js
import DigitalKeyboard from 'digital-keyboard';
function inputValue(value){
console.log(value); //DigitalKeyboard return value
document.querySelector('#values').innerHTML = value;
}
new DigitalKeyboard(
{
el: document.querySelector('#app'),
className: 'container',
type: 'idcard',
inputValue: inputValue,
integerDigits: 4,
decimalDigits: 2
}
);
```
- **React**
```jsx
import React from 'react';
import DigitalKeyboard from 'digital-keyboard';
import s from './digitalKeyboard.scss';
class KeyboardPage extends React.Component {
constructor(){
super();
this.inputValue = this.inputValue.bind(this);
this._renderKeyboard = this._renderKeyboard.bind(this);
}
componentDidMount(){
this._renderKeyboard();
}
inputValue(value){
console.log(value); //DigitalKeyboard return value
}
_renderKeyboard(){
return new DigitalKeyboard (
{
el: this.refs.digitalKeyboard,
className: s.container,
type: 'number',
inputValue: this.inputValue,
integerDigits: 4,
decimalDigits: 2
}
);
}
render(){
return (
)
}
}
export default KeyboardPage;
```
- **Vue**
```js
```
* **Angular**
```typescript
// Online-demo: https://stackblitz.com/edit/angular-hkexnq
import { Component, ViewChild, OnInit, ViewEncapsulation} from '@angular/core';
import DigitalKeyboard from "digital-keyboard";
@Component({
selector: 'my-app',
template: `
`,
styles: [`
.container {
color: #333;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit{
@ViewChild('keyboard') keyboard;
ngOnInit(){
this._renderDigitalKeyboard();
}
_renderDigitalKeyboard(){
return new DigitalKeyboard (
{
el: this.keyboard.nativeElement,
className: 'container',
type: 'number',
inputValue: this.inputValue,
integerDigits: 4,
decimalDigits: 2
}
);
}
inputValue(value) {
console.log(value); //DigitalKeyboard return value
}
}
```
## How to Contribute
Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our [open issues](https://github.com/simbawus/DigitalKeyboard/issues),[submit a new issues](https://github.com/simbawus/DigitalKeyboard/issues/new?labels=bug) or [feature request](https://github.com/simbawus/DigitalKeyboard/issues/new?labels=enhancement), participate in discussions, upvote or downvote the issues you like or dislike.
## License
[**The MIT License**](http://opensource.org/licenses/MIT).