angular inputNumber指令输入框只能输入数字的实现


Posted in Javascript onDecember 03, 2019

1、建立一个独立模块用于作为公用指令的模块

1)生成模块

ng g m directive

2)进入指令模块目录

cd directive

3)生成一个只能输入数字的指令类

ng g d numberinput

4)指令模块directive.module.ts代码如下

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NumberinputDirective } from './numberinput.directive';
@NgModule({
 imports: [
  CommonModule
 ],
 declarations: [NumberinputDirective],
 exports:[ // 使引用该模块的类可以使用该指令
  NumberinputDirective
 ]
})
export class DirectiveModule { }

5)指令类numberinput.directive.ts代码如下

@Directive({
 selector: 'input[numberInput]'
})
export class NumberInputDirective {
 // tslint:disable-next-line: no-input-rename
 @Input('numberInput') numberType: string;
 constructor(private el: ElementRef) {}

 @HostListener('input', ['$event.target.value'])
 onChange(value: string): void {
  if (this.numberType.length < 1) {
   this.updateIntegerValue(value);
  } else {
   this.el.nativeElement.value = value.replace(/[^\d.]/g, '');
  }
 }
 @HostListener('blur', ['$event.target.value']) onBlur(value: number): void {
  if (this.numberType.length >= 1) {
   this.updateFloatValue(value);
  }
 }
 updateIntegerValue(value: string): void {
  this.el.nativeElement.value = value.replace(/[^\d]/g, '');
 }
 updateFloatValue(floatValue: number): void {
  const value = String(floatValue);
  const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/.test(value);
  const numBegin = /^\d/.test(value);
  const numEnd = /\d$/.test(value);
  if (reg && numBegin && numEnd) {
   this.el.nativeElement.value = value;
  } else {
   this.el.nativeElement.value = 0;
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
JavaScript的console命令使用实例
Dec 03 #Javascript
JavaScript实现京东放大镜效果
Dec 03 #Javascript
微信小程序实现图片压缩
Dec 03 #Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 #Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 #Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 #Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 #Javascript
You might like
虫族 ZERG 概述
2020/03/14 星际争霸
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
javascript中clone对象详解
2014/12/03 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
angularjs $http实现form表单提交示例
2017/06/09 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
tensorflow中next_batch的具体使用
2018/02/02 Python
Numpy之random函数使用学习
2019/01/29 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
大学生求职简历的自我评价范文
2013/10/12 职场文书
自我鉴定三原则
2014/01/13 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
爱我中华教学反思
2014/04/28 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
安全生产培训心得体会
2016/01/18 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
DE1107机评
2022/04/05 无线电
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python