ng-numeric-keyboard
Version:
Number keyboard for mobile browsers For Angular
108 lines (78 loc) • 4.14 kB
Markdown
<h1 align="center">ng-numeric-keyboard</h1>
<p align="center">Number keyboard for mobile browsers For Angular</p>
<p align="center">
<a aria-label="build status" href="https://github.com/tak-bro/ng-numeric-keyboard/actions">
<img alt="" src="https://github.com/tak-bro/ng-numeric-keyboard/workflows/build/badge.svg">
</a>
<a aria-label="npm package" href="https://www.npmjs.com/package/ng-numeric-keyboard">
<img alt="" src="https://img.shields.io/npm/v/ng-numeric-keyboard.svg">
</a>
<a aria-label="last commit" href="https://github.com/tak-bro/ng-numeric-keyboard/commits/develop">
<img alt="" src="https://img.shields.io/github/last-commit/tak-bro/ng-numeric-keyboard.svg">
</a>
<a aria-label="license" href="https://github.com/tak-bro/ng-numeric-keyboard/blob/develop/LICENSE">
<img src="https://img.shields.io/github/license/tak-bro/ng-numeric-keyboard.svg" alt="">
</a>
</p>
> This project was forked in [numeric-keyboard](https://github.com/viclm/numeric-keyboard)
## Demo
## Usage
### 1. Install
```
npm install ng-numeric-keyboard --save
```
import `NgNumericKeyboardModule`。
```typescript
import { NgNumericKeyboardModule } from 'ng-numeric-keyboard';
@NgModule({
imports: [ BrowserModule, NgNumericKeyboardModule ],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### 2. Template
```html
<ng-numeric-input [layout]="'number'"
[entertext]="'Next'"
[placeholder]="'This is placeholder'"
[disabled]="false"
[(ngModel)]="data"
(enterpress)="onEnter()"
(ngModelChange)="onChange()"
(focus)="onInputFocus()"
(blur)="onInputBlur()">
</ng-numeric-input>
```
## API
Frequently used API is below. See the [link](https://github.com/viclm/numeric-keyboard#optionsprops) for more information
### Inputs
| Name | Type | Default | Description |
| -------------------------- |---------- | ------------ | --------------- |
| `layout` | string | `number` | keyboard layout. Possible layouts are `number`, `tel` and `phone` |
| `entertext` | string | `Enter` | the label of keyboard enter key |
| `placeholder` | string | | the input component's placeholder |
| `disabled` | boolean | false | disable the input component |
### Outputs
| Name | Type | Description |
| ----------------------- | ----------------- | ----------- |
| `ngModelChange()` | number | Emits when the enter key of keyboard is pressed |
| `enterpress()` | void | Emits when the input's value changes |
| `focus()` | void | Emits when called on focusing |
| `blur()` | void | Emits when the input loses the focus |
### Layouts
There are three built-in layouts called `number`, `tel` and `phone` which can be used as a replacement of system keyboard.
##### number layout
##### tel layout
##### phone layout
## Troubleshooting
Please follow this guidelines when reporting bugs and feature requests:
1. Use [GitHub Issues](https://github.com/tak-bro/ng-numeric-keyboard/issues) board to report bugs and feature requests (not our email address)
2. Please **always** write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.
Thanks for understanding!
### License
The MIT License (see the [LICENSE](https://github.com/tak-bro/ng-numeric-keyboard/blob/develop/LICENSE) file for the full text)