Get unlimited public & private packages + team-based management with npm Teams.Learn more »

@uiowa/digit-only

1.3.0 • Public • Published

Angular 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.

Since v1.1.0, this directive accepts an attribute which indicates if the input number allows a decimal point.

Since 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.

Build Status npm

Medium Article

Demo

Installation

npm i -S @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]+)?"
/>

Install

npm i @uiowa/digit-only

DownloadsWeekly Downloads

2,808

Version

1.3.0

License

MIT

Unpacked Size

100 kB

Total Files

24

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar