我正在使用plunkr下面的代码/指令。我需要使用输入2位小数字的数字。下面的代码工作正常，但是当用户以句点代码中断开始并且不允许使用它之前输入数字时。任何修复都可以为此或更好的方法实现此目的。当用户输入时，应该防止他犯错误。
https://plnkr.co/edit/hyFVKBfksocBXtntC2xx?p=preview
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[OnlyNumber]'
})
export class OnlyNumber {
elemRef: ElementRef
constructor(private el: ElementRef) {
this.elemRef = el
}
@Input() OnlyNumber: boolean;
@Input() DecimalPlaces: string;
@Input() minValue: string;
@Input() maxValue: string;
@HostListener('keydown', ['$event']) onKeyDown(event) {
let e = <KeyboardEvent> event;
if (this.OnlyNumber) {
if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode == 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode == 88 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
}
}
@HostListener('keypress', ['$event']) onKeyPress(event) {
let e = <any> event
let valInFloat: number = parseFloat(e.target.value)
if(this.minValue.length) {
// (isNaN(valInFloat) && e.key === "0") - When user enters value for first time valInFloat will be NaN, e.key condition is
// because I didn't want user to enter anything below 1.
// NOTE: You might want to remove it if you want to accept 0
if( valInFloat < parseFloat(this.minValue) || (isNaN(valInFloat) && e.key === "0") ) {
e.preventDefault();
}
}
if(this.maxValue.length) {
if(valInFloat > parseFloat(this.maxValue)) {
e.preventDefault();
}
}
if (this.DecimalPlaces) {
let currentCursorPos: number = -1;
if (typeof this.elemRef.nativeElement.selectionStart == "number") {
currentCursorPos = this.elemRef.nativeElement.selectionStart;
} else {
// Probably an old IE browser
console.log("This browser doesn't support selectionStart");
}
let dotLength: number = e.target.value.replace(/[^\.]/g, '').length
// If user has not entered a dot(.) e.target.value.split(".")[1] will be undefined
let decimalLength = e.target.value.split(".")[1] ? e.target.value.split(".")[1].length : 0;
// (this.DecimalPlaces - 1) because we don't get decimalLength including currently pressed character
// currentCursorPos > e.target.value.indexOf(".") because we must allow user's to enter value before dot(.)
// Checking Backspace etc.. keys because firefox doesn't pressing them while chrome does by default
if( dotLength > 1 || (dotLength === 1 && e.key === ".") || (decimalLength > (parseInt(this.DecimalPlaces) - 1) &&
currentCursorPos > e.target.value.indexOf(".")) && ["Backspace", "ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 ) {
e.preventDefault();
}
}
}
}
答案 0 :(得分：0)
if（valInFloat＆lt; parseFloat（this.minValue）||（isNaN（valInFloat）＆amp;＆amp; e.key ===＆＃34; 0＆＃34;））{ e.preventDefault（）; }
您可以删除标准以检查＆＃34; valInFloat＆lt; parseFloat（this.minValue）＆＃34;一部分。或者修改minValue输入（设置为0.01），这与当前与小数开始相矛盾并尝试获取两位小数，因为当前模板中的minValue设置为1.0000。
更新：我部分误解了您的问题，我看到您关注的是用户能够在小数点后开始在小数点之前添加一些内容。幸运的是，这与上面提到的类似，因为它也是由于逻辑阻止事件传播一旦满足数字特异性条件。
更新＃2：
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[OnlyNumber]'
})
export class OnlyNumber {
elemRef: ElementRef
constructor(private el: ElementRef) {
this.elemRef = el;
let periodAllowed: bool = false;
}
@Input() OnlyNumber: boolean;
@Input() DecimalPlaces: string;
@Input() minValue: string;
@Input() maxValue: string;
@HostListener('keydown', ['$event']) onKeyDown(event) {
let e = <KeyboardEvent> event;
console.log('e.target.value:', e.target.value);
//allow the decimal only when other values are present
if(e.target.value.length > 0) {
this.periodAllowed = true;
} else {
this.periodAllowed = false;
}
if (this.OnlyNumber) {
if ([46, 8, 9, 27, 13, 110].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode == 67 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode == 88 && e.ctrlKey === true) ||
// Allow period
(e.keyCode == 190 && this.periodAllowed === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
}
}
@HostListener('keypress', ['$event']) onKeyPress(event) {
let e = <any> event
let valInFloat: number = parseFloat(e.target.value)
if(this.minValue.length) {
// (isNaN(valInFloat) && e.key === "0") - When user enters value for first time valInFloat will be NaN, e.key condition is
// because I didn't want user to enter anything below 1.
// NOTE: You might want to remove it if you want to accept 0
if( valInFloat < parseFloat(this.minValue) || (isNaN(valInFloat) && e.key === "0") ) {
e.preventDefault();
}
}
if(this.maxValue.length) {
if(valInFloat > parseFloat(this.maxValue)) {
e.preventDefault();
}
}
if (this.DecimalPlaces) {
let currentCursorPos: number = -1;
if (typeof this.elemRef.nativeElement.selectionStart == "number") {
currentCursorPos = this.elemRef.nativeElement.selectionStart;
} else {
// Probably an old IE browser
console.log("This browser doesn't support selectionStart");
}
let dotLength: number = e.target.value.replace(/[^\.]/g, '').length
// If user has not entered a dot(.) e.target.value.split(".")[1] will be undefined
let decimalLength = e.target.value.split(".")[1] ? e.target.value.split(".")[1].length : 0;
// (this.DecimalPlaces - 1) because we don't get decimalLength including currently pressed character
// currentCursorPos > e.target.value.indexOf(".") because we must allow user's to enter value before dot(.)
// Checking Backspace etc.. keys because firefox doesn't pressing them while chrome does by default
if( dotLength > 1 || (dotLength === 1 && e.key === ".") || (decimalLength > (parseInt(this.DecimalPlaces) - 1) &&
currentCursorPos > e.target.value.indexOf(".")) && ["Backspace", "ArrowLeft", "ArrowRight"].indexOf(e.key) === -1 ) {
e.preventDefault();
}
}
}
}
上述任何想象力都不是优雅的，但是这样的事情会完成你在下面的评论中所建议的内容。
希望这有帮助。