概述：
程序代码本身也是一种艺术，是一件作品，这样我们就要有一份工匠精神去静心打磨它，使他更具艺术性，让代码更具魔力，本文是《angular 用指令实现一个文本框只能输入数字》的续作，更加严谨的呈现了代码的实现，虽然可能还有瑕疵，但是在不断完善自己的道路就应该孜孜追求，不断前行。
这里为了代码的完整性，还是从零开始一步一步实现
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代码如下：
import {
Directive,
Attribute,
ElementRef }
from
'@angular/core';
import {
HostListener,
Input }
from
'@angular/core';
@
Directive({
selector:
'[att-numberonly]'
})
export
class
NumberinputDirective {
@
Input(
'scale')
scale:
number=
2;
// 默认只能保留两位小数
constructor(
private
element:
ElementRef) {
}
@
HostListener(
'keydown', [
'$event'])
onKeyDown(
event) {
let
e = <
KeyboardEvent>
event;
// 获取元素的值
let
curValue:
String =
this.
element.
nativeElement.
children[
0].
value;
// 1 精度为0时不能录入小数点(只能输入整数)
if(
this.
scale ==
0 && [
110,
190].
indexOf(
e.
keyCode) >
0){
e.
preventDefault();
return;
}
// 2 当录入小数点情况下，不能继续录入
if(
curValue.
indexOf(
'.') >
0 && [
110,
190].
indexOf(
e.
keyCode) >
0){
e.
preventDefault();
return;
}
// 3 正常情况下照常录入
// 支持delete(46)、Backspace(8)、Tab(9)、Esc(27)、Enter(13)、小数点(110-数字键盘)、.(190)、->(39) <-(37)
if ([
46,
8,
9,
27,
13,
110,
190,
37,
39].
indexOf(
e.
keyCode) !== -
1 ||
// 允许全选: Ctrl+A
(
e.
keyCode ===
65 && (
e.
ctrlKey ||
e.
metaKey)) ||
// 允许复制: Ctrl+C
(
e.
keyCode ===
67 && (
e.
ctrlKey ||
e.
metaKey)) ||
// 允许粘贴: Ctrl+V
(
e.
keyCode ===
86 && (
e.
ctrlKey ||
e.
metaKey)) ||
// 允许剪切: Ctrl+X
(
e.
keyCode ===
88 && (
e.
ctrlKey ||
e.
metaKey)) ||
// 允许: home（头）, end（尾）, left（左移）, right（右移）
(
e.
keyCode >=
35 &&
e.
keyCode <=
39)) {
// 保持默认的处理
return;
}
// 4 小数的要符合精度要求，否则无法录入(数字以外的其他命令键可以执行)
// 判断小数精度
let
unit =
curValue.
split(
'.');
// 位数满足时，不能再输入
if(
unit[
1] &&
unit[
1].
length ==
this.
scale){
e.
preventDefault();
return;
}
// 确保数字以外的案件被拒绝执行默认动作
if ((
e.
shiftKey || (
e.
keyCode <
48 ||
e.
keyCode >
57)) && (
e.
keyCode <
96 ||
e.
keyCode >
105)) {
e.
preventDefault();
}
}
}
6）指令的适应
<1>使用模块引入该指令模块
扫描二维码关注公众号，回复：
919191 查看本文章
@NgModule({
imports: [
CommonModule,
DirectiveModule
]
<2>文本框中引入该指令属性
<
nz-input
formControlName=
"jlxs"
att-numberonly [
scale]=
"0" [
nzSize]=
"'large'"
>
</
nz-input
>