npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@uiowa/digit-only

v3.2.1

Published

This package includes two Angular directives. The digitOnly directive only allows numbers in the input box when typing, pasting or drag/dropping. The mask directive checks the input pattern attribute.

Downloads

34,316

Readme

Angular DigitOnly Directive and Mask Directive

Build Status npm

Demo

Medium Article: Digit Only Directive in Angular

  • [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, fixes #56).

  • v3.1.0(v2.3.0): digitOnly directive now supports negative values (merges a pull request #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) in the mask directive: support dynamic pattern attribute binding.

  • v2.2.2: fix an issue (#28) to prevent dead keys 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): 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) 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) 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

npm i @uiowa/digit-only

Usage

// in your Angular module
import { DigitOnlyModule } from '@uiowa/digit-only';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    BrowserModule,
    DigitOnlyModule
  ],
  ...
})
export class YourModule { }
// in your component.html
<input type="text" digitOnly />

// pull out the numeric keypad in mobile devices and tablets
<input
  type="text"
  name="zipcode"
  id="zipcode"
  placeholder="00000"
  maxlength="5"
  inputmode="numeric"
  pattern="[0-9]*"
  digitOnly
/>

// turn off browser autocomplete
<input ... autocomplete="off" />

// allows decimal input
<input
  id="decimal-number"
  type="text"
  digitOnly
  decimal="true"
  placeholder="000"
/>

// allows to set decimal separator
<label for="digit-only-decimal-comma">
  Digit Only input box that allows a <i>decimal point</i> using
  <strong>a comma as the separator</strong>
</label>
<input
  id="digit-only-decimal-comma"
  type="text"
  digitOnly
  decimal="true"
  decimalSeparator=","
  placeholder="0,00"
  pattern="[0-9]+([,][0-9]+)?"
/>

// Digit Only input only allows two decimal places
<input
  id="currency"
  type="text"
  name="currency"
  inputmode="numeric"
  pattern="^\d+(\.\d{1,2})?$"
  placeholder="0.00"
  digitOnly
  decimal="true"
/>

mask directive usage

// input masked with pattern attribute: <code>##-####</code>
<input
  id="org-dept"
  type="text"
  pattern="^(\d{0,2}|\d{2}-\d{0,4})$"
  name="org-dept"
  title="org-dept"
  placeholder="00-0000"
  mask
/>