typescript 将输入类型编号限制为角度 2 中的小数点后 2 位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41806383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 04:11:43 来源:igfitidea点击:
limit input type number to 2 place of decimal in angular 2
提问by ER.SHASHI TIWARI
I have a number of input boxes on a html page. I want to restrict the user from entering any numbers after 2 decimals.
我在 html 页面上有许多输入框。我想限制用户输入 2 位小数后的任何数字。
Currently try to apply html 5 input Step="0.00" but doesn't work.
目前尝试应用 html 5 input Step="0.00" 但不起作用。
Any typescript solution is also ok
任何打字稿解决方案也可以
采纳答案by ER.SHASHI TIWARI
I got the solution using @pipe
我使用@pipe 得到了解决方案
import { Directive,Input,Inject, HostListener, ElementRef, OnInit } from "@angular/core";
const PADDING = "000000";
@Pipe({ name: "CurrencyPipe" })
export class CurrencyPipe implements PipeTransform {
transform(value: any, args: string[]): any {
var clean = value.replace(/[^-0-9\.]/g, '');
var negativeCheck = clean.split('-');
var decimalCheck = clean.split('.');
if (negativeCheck[1] != undefined) {
negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length);
clean = negativeCheck[0] + '-' + negativeCheck[1];
if (negativeCheck[0].length > 0) {
clean = negativeCheck[0];
}
}
if (decimalCheck[1] != undefined) {
decimalCheck[1] = decimalCheck[1].slice(0, 2);
clean = decimalCheck[0] + '.' + decimalCheck[1];
}
return clean;
}
parse(value: string, fractionSize: number = 2): string {
var clean = value.replace(/[^-0-9\.]/g, '');
var negativeCheck = clean.split('-');
var decimalCheck = clean.split('.');
if (negativeCheck[1] != undefined) {
negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length);
clean = negativeCheck[0] + '-' + negativeCheck[1];
if (negativeCheck[0].length > 0) {
clean = negativeCheck[0];
}
}
if (decimalCheck[1] != undefined) {
decimalCheck[1] = decimalCheck[1].slice(0, 2);
clean = decimalCheck[0] + '.' + decimalCheck[1];
}
return clean;
}
}
And Pipe Extends in my directive.
和 Pipe Extends 在我的指令中。
import { Directive, Input, Inject, HostListener, OnChanges, ElementRef, Renderer, AfterViewInit, OnInit } from "@angular/core";
import { CurrencyPipe } from '../../shared/pipe/orderby';
@Directive({ selector: "[CurrencyFormatter]" })
export class CurrencyFormatterDirective {
private el: HTMLInputElement;
constructor(
private elementRef: ElementRef,
private currencyPipe: CurrencyPipe
) {
this.el = this.elementRef.nativeElement;
}
ngOnInit() {
this.el.value = this.currencyPipe.parse(this.el.value);
}
@HostListener("focus", ["$event.target.value"])
onFocus(value) {
this.el.value = this.currencyPipe.parse(value); // opossite of transform
}
@HostListener("blur", ["$event.target.value"])
onBlur(value) {
this.el.value = this.currencyPipe.parse(value);
}
@HostListener("keyup", ["$event.target.value"])
onKeyUp(value) {
this.el.value = this.currencyPipe.parse(value);
}
}
Import Directive on your component
组件上的导入指令
import { CurrencyFormatterDirective } from '../../shared/directive/showOnRowHover';
import { CurrencyPipe } from '../../shared/pipe/orderby';
providers: [CurrencyPipe,
CurrencyFormatterDirective]
And Directive on your html Input
和你的 html 输入指令
<input type="text" [(ngModel)]="invoiceDetail.InvoiceAmount" class="form-control" placeholder="Enter invoice amount"
CurrencyFormatter>
回答by Dhyey
See demo of below directive in Plnkr.
You can achieve this using the following directive :
您可以使用以下指令实现此目的：
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();
}
}
}
}
The HTML usage is as follows:
HTML 用法如下：
<input type="text" OnlyNumber="true" DecimalPlaces="2" minValue="1.00" maxValue="999999999.00">
If you find any bugs with it please let me know in the comments below.
如果您发现任何错误，请在下面的评论中告诉我。
P.S: This directive is improved work upon this answerto validate decimal points.
PS：此指令改进了此答案以验证小数点的工作。
回答by anshuVersatile
<input type='number' step='0.01' value='0.00' placeholder='0.00' />
don't use Stepuse stepand if still you want old browser's support you can opt for javascript code for same
不要使用Stepuse step，如果您仍然需要旧浏览器的支持，您可以选择相同的 javascript 代码
