当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

ngx-digit-only

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 阎承
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Angular DigitOnly Directive and Mask Directive

Demo

Medium Article: Digit Only Directive in Angular

  • 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".

  • 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
/>
  • 之前写过nginx反代替换的教程(传送门),使用了ngx_http_substitutions_filter_module模块。不过这货只能替换同一行,具有局限性-_-# 现在一个更强大的替换模块来了……replace-filter-nginx-module 下面只翻译一下,再加个安装教程,因为我自己也没弄懂怎样玩= = 1.安装此模块需要先安装sregex运行库 apt-get u

  • ngnix源代码学习(5)---在学习ngx_string 作者:wallwind  http://blog.csdn.net/wallwind/article/details/7482608 贴一些源代码: /* * Copyright (C) Igor Sysoev * Copyright (C) Nginx, Inc. */ #include <ngx_config.h> #inc

  • /* * Copyright (C) Igor Sysoev * Copyright (C) Nginx, Inc. */ #include <ngx_config.h> #include <ngx_core.h> static u_char *ngx_sprintf_num(u_char *buf, u_char *last, uint64_t ui64, u_char z

 相关资料
  • 描述 (Description) 字符类\p{Digit}匹配任何数字。 例子 (Example) 以下示例显示了Posix字符类匹配的用法。 package com.wenjiangs; import java.util.regex.Matcher; import java.util.regex.Pattern; public class PosixCharacterClassDemo {

  • Question leetcode: Number of Digit One | LeetCode OJ lintcode: (3) Digit Counts Count the number of k's between 0 and n. k can be 0 - 9. Example if n=12, k=1 in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,

  • ngx-weui 是一个使用 Angular 构建的 WeUI 组件。 在线示例以及API文档。

  • ngx-fastdfs 是 nginx + lua +fastdfs 实现分布式图片实时动态压缩。 install 进入docker目录docker build -t  fastdfs:dev . 使用 docker -idt -p 80:80 fastdfs:dev /bin/bash进入容器执行/etc/rc.local 测试 进入容器执行test目录下的./test.sh或者直接执行下面脚本

  • ngx-markdown ngx-markdown is an Angular library that combines... Marked to parse markdown to HTML Prism.js for language syntax highlight Emoji-Toolkit for emoji support KaTeX for math expression rende

  • ngx-admin Who uses ngx-admin?| Documentation | Installation Guidelines | Angular templates New! Material theme for ngx-admin Material admin theme is based on the most popular Angular dashboard templat