https://github.com/changhuixu/ngx-digit-only
An Angular directive to only allow [0-9] in the input box when typing, pasting or drag/dropping.
https://github.com/changhuixu/ngx-digit-only
angular angular8 angular9 digitonly directive input mask numberonly
Last synced: 6 months ago
JSON representation
An Angular directive to only allow [0-9] in the input box when typing, pasting or drag/dropping.
- Host: GitHub
- URL: https://github.com/changhuixu/ngx-digit-only
- Owner: changhuixu
- License: mit
- Created: 2018-08-18T14:08:49.000Z (about 7 years ago)
- Default Branch: main
- Last Pushed: 2024-04-16T09:32:43.000Z (over 1 year ago)
- Last Synced: 2025-04-13T05:00:01.807Z (6 months ago)
- Topics: angular, angular8, angular9, digitonly, directive, input, mask, numberonly
- Language: TypeScript
- Homepage: https://changhuixu.github.io/ngx-digit-only/
- Size: 2.18 MB
- Stars: 161
- Watchers: 4
- Forks: 70
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular DigitOnly Directive and Mask Directive
[](https://github.com/changhuixu/ngx-digit-only/actions)
[](https://www.npmjs.com/package/@uiowa/digit-only)
## [Demo](https://changhuixu.github.io/ngx-digit-only/)
[Medium Article: Digit Only Directive in Angular](https://codeburst.io/digit-only-directive-in-angular-3db8a94d80c3)
- [x] **input `digitOnly` directive**
An Angular directive only allows [0-9] in the input box when typing, pasting or drag/dropping. This directive handles both Windows keyboard and Mac keyboard. This directive works with `input type="text"`, not `input type="number"`.
- [x] **input `mask` directive**
This directive checks the input `pattern` attribute if set.
## CHANGELOG
- **v3.2.0**(**v2.4.0**): `digitOnly` directive now supports disabling paste events (merges a pull request [#57](/../../pull/49), fixes [#56](/../../issues/56)).
- **v3.1.0**(**v2.3.0**): `digitOnly` directive now supports negative values (merges a pull request [#49](/../../pull/49)).
- **v3.0.0**: a release on par with Angular 12. For projects in Angular v10 or v11, please use v2 of this library.
- **v2.2.3**: fix an issue ([#50](/../../issues/50)) in the `mask` directive: support dynamic pattern attribute binding.
- **v2.2.2**: fix an issue ([#28](/../../issues/28)) to prevent [dead keys](https://en.wikipedia.org/wiki/Dead_key) in the `digitOnly` directive.
- **v2.2.1**: `digitOnly` directive now dispatches an `input` event when paste in Firefox.
- **v2.2.0**: fix an issue ([#35](/../../issues/35)): for better international support, both `mask` and `digitOnly` directives now also check the `code` attribute in `KeyboardEvent`.
- **v2.1.0**(**v1.9.0**): fix an issue ([#39](/../../issues/39)) when typing decimal numbers for the `digitOnly` directive
- **v2.0.0**: add `tslib` v2.0 in the dependency, which is required by TypeScript 3.9 (as of Angular 10).
- **v1.8.0**: fix an issue ([#38](/../../issues/38)) when pasting in IE and Edge for the `digitOnly` directive
- **v1.7.0**: the `digitOnly` directive allows model binding to `min`, `max`, and `pattern` properties.
- See demo page for examples.
- **v1.6.0**: the `mask` directive is added to this library.
- See an example below about an input allows `##-####`.
- **v1.5.0**: this directive checks the input `pattern` attribute if set.
- See an example below about an input only allows decimal numbers with precision of 2.
- **v1.3.0**: this directive accepts an attribute for the separator for decimal numbers.
- By default, the separator is a `.`. You can set it to comma when needed.
- **v1.1.0**: this directive accepts an attribute which indicates if the input number allows a decimal point.
---
## Installation
```shell
npm i @uiowa/digit-only
```
## Usage
```typescript
// in your Angular module
import { DigitOnlyModule } from '@uiowa/digit-only';
@NgModule({
declarations: [
...
],
imports: [
BrowserModule,
DigitOnlyModule
],
...
})
export class YourModule { }
```
```html
// in your component.html
// pull out the numeric keypad in mobile devices and tablets
// turn off browser autocomplete
// allows decimal input
// allows to set decimal separator
Digit Only input box that allows a decimal point using
a comma as the separator
// Digit Only input only allows two decimal places
```
### `mask` directive usage
```html
// input masked with pattern attribute: ##-####
```