{"id":23250735,"url":"https://github.com/changhuixu/ngx-digit-only","last_synced_at":"2025-04-13T06:21:22.644Z","repository":{"id":46929643,"uuid":"145225095","full_name":"changhuixu/ngx-digit-only","owner":"changhuixu","description":"An Angular directive to only allow [0-9] in the input box when typing, pasting or drag/dropping.","archived":false,"fork":false,"pushed_at":"2024-04-16T09:32:43.000Z","size":2287,"stargazers_count":161,"open_issues_count":11,"forks_count":70,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-13T05:00:01.807Z","etag":null,"topics":["angular","angular8","angular9","digitonly","directive","input","mask","numberonly"],"latest_commit_sha":null,"homepage":"https://changhuixu.github.io/ngx-digit-only/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/changhuixu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-18T14:08:49.000Z","updated_at":"2024-11-29T07:58:24.000Z","dependencies_parsed_at":"2023-12-01T02:34:07.528Z","dependency_job_id":"d84557d2-b701-416b-8220-343df8f10a23","html_url":"https://github.com/changhuixu/ngx-digit-only","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Fngx-digit-only","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Fngx-digit-only/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Fngx-digit-only/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changhuixu%2Fngx-digit-only/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/changhuixu","download_url":"https://codeload.github.com/changhuixu/ngx-digit-only/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665756,"owners_count":21142123,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular8","angular9","digitonly","directive","input","mask","numberonly"],"created_at":"2024-12-19T09:14:50.284Z","updated_at":"2025-04-13T06:21:22.603Z","avatar_url":"https://github.com/changhuixu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular DigitOnly Directive and Mask Directive\n\n[![Build Status](https://github.com/changhuixu/ngx-digit-only/actions/workflows/main.yml/badge.svg)](https://github.com/changhuixu/ngx-digit-only/actions)\n[![npm](https://img.shields.io/npm/v/@uiowa/digit-only.svg)](https://www.npmjs.com/package/@uiowa/digit-only)\n\n## [Demo](https://changhuixu.github.io/ngx-digit-only/)\n\n[Medium Article: Digit Only Directive in Angular](https://codeburst.io/digit-only-directive-in-angular-3db8a94d80c3)\n\n- [x] **input `digitOnly` directive**\n\n  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\"`.\n\n- [x] **input `mask` directive**\n\n  This directive checks the input `pattern` attribute if set.\n\n## CHANGELOG\n\n- **v3.2.0**(**v2.4.0**): `digitOnly` directive now supports disabling paste events (merges a pull request [#57](/../../pull/49), fixes [#56](/../../issues/56)).\n\n- **v3.1.0**(**v2.3.0**): `digitOnly` directive now supports negative values (merges a pull request [#49](/../../pull/49)).\n\n- **v3.0.0**: a release on par with Angular 12. For projects in Angular v10 or v11, please use v2 of this library.\n\n- **v2.2.3**: fix an issue ([#50](/../../issues/50)) in the `mask` directive: support dynamic pattern attribute binding.\n\n- **v2.2.2**: fix an issue ([#28](/../../issues/28)) to prevent [dead keys](https://en.wikipedia.org/wiki/Dead_key) in the `digitOnly` directive.\n\n- **v2.2.1**: `digitOnly` directive now dispatches an `input` event when paste in Firefox.\n\n- **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`.\n\n- **v2.1.0**(**v1.9.0**): fix an issue ([#39](/../../issues/39)) when typing decimal numbers for the `digitOnly` directive\n\n- **v2.0.0**: add `tslib` v2.0 in the dependency, which is required by TypeScript 3.9 (as of Angular 10).\n\n- **v1.8.0**: fix an issue ([#38](/../../issues/38)) when pasting in IE and Edge for the `digitOnly` directive\n\n- **v1.7.0**: the `digitOnly` directive allows model binding to `min`, `max`, and `pattern` properties.\n\n  - See demo page for examples.\n\n- **v1.6.0**: the `mask` directive is added to this library.\n\n  - See an example below about an input allows `##-####`.\n\n- **v1.5.0**: this directive checks the input `pattern` attribute if set.\n\n  - See an example below about an input only allows decimal numbers with precision of 2.\n\n- **v1.3.0**: this directive accepts an attribute for the separator for decimal numbers.\n\n  - By default, the separator is a `.`. You can set it to comma when needed.\n\n- **v1.1.0**: this directive accepts an attribute which indicates if the input number allows a decimal point.\n\n---\n\n## Installation\n\n```shell\nnpm i @uiowa/digit-only\n```\n\n## Usage\n\n```typescript\n// in your Angular module\nimport { DigitOnlyModule } from '@uiowa/digit-only';\n\n@NgModule({\n  declarations: [\n    ...\n  ],\n  imports: [\n    BrowserModule,\n    DigitOnlyModule\n  ],\n  ...\n})\nexport class YourModule { }\n```\n\n```html\n// in your component.html\n\u003cinput type=\"text\" digitOnly /\u003e\n\n// pull out the numeric keypad in mobile devices and tablets\n\u003cinput\n  type=\"text\"\n  name=\"zipcode\"\n  id=\"zipcode\"\n  placeholder=\"00000\"\n  maxlength=\"5\"\n  inputmode=\"numeric\"\n  pattern=\"[0-9]*\"\n  digitOnly\n/\u003e\n\n// turn off browser autocomplete\n\u003cinput ... autocomplete=\"off\" /\u003e\n\n// allows decimal input\n\u003cinput\n  id=\"decimal-number\"\n  type=\"text\"\n  digitOnly\n  decimal=\"true\"\n  placeholder=\"000\"\n/\u003e\n\n// allows to set decimal separator\n\u003clabel for=\"digit-only-decimal-comma\"\u003e\n  Digit Only input box that allows a \u003ci\u003edecimal point\u003c/i\u003e using\n  \u003cstrong\u003ea comma as the separator\u003c/strong\u003e\n\u003c/label\u003e\n\u003cinput\n  id=\"digit-only-decimal-comma\"\n  type=\"text\"\n  digitOnly\n  decimal=\"true\"\n  decimalSeparator=\",\"\n  placeholder=\"0,00\"\n  pattern=\"[0-9]+([,][0-9]+)?\"\n/\u003e\n\n// Digit Only input only allows two decimal places\n\u003cinput\n  id=\"currency\"\n  type=\"text\"\n  name=\"currency\"\n  inputmode=\"numeric\"\n  pattern=\"^\\d+(\\.\\d{1,2})?$\"\n  placeholder=\"0.00\"\n  digitOnly\n  decimal=\"true\"\n/\u003e\n```\n\n### `mask` directive usage\n\n```html\n// input masked with pattern attribute: \u003ccode\u003e##-####\u003c/code\u003e\n\u003cinput\n  id=\"org-dept\"\n  type=\"text\"\n  pattern=\"^(\\d{0,2}|\\d{2}-\\d{0,4})$\"\n  name=\"org-dept\"\n  title=\"org-dept\"\n  placeholder=\"00-0000\"\n  mask\n/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanghuixu%2Fngx-digit-only","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanghuixu%2Fngx-digit-only","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanghuixu%2Fngx-digit-only/lists"}