如何限制输入文本框只能以 Angular2 形式输入数字?
How to restrict input textbox to enter numbers only in Angular2 form?
我必须限制用户只能在 Angular2->form 的字段中输入数字
我有解决方案,但退格键在输入字段中不起作用
任何人都可以对此有适当的解决方案吗?
form.html
<input (keypress)="keyPress($event)" minlength="8" maxlength="15" required />
form.component.ts
keyPress(event: any) {
const pattern = /[0-9\+\-\ ]/;
let inputChar = String.fromCharCode(event.charCode);
// console.log(inputChar, e.charCode);
if (!pattern.test(inputChar)) {
// invalid character, prevent input
event.preventDefault();
}
}
在 kepress 事件中,它限制用户只能输入数字,但此代码的问题是退格键,Tab 键不是 working.So,此代码与我的预期不符...
退格键不起作用,因为:event.charCode
不会映射到退格键的 0-9
数字之一。
您需要将退格键列入白名单(即 keyCode = 8)。像这样的东西(从我的头顶):
if(event.keyCode != 8 && !pattern.test(inputChar)) {
event.preventDefault();
}
我的回答是:-
form.html:
form.component.ts
restrictNumeric = function (e) {
var input;
if (e.metaKey || e.ctrlKey) {
return true;
}
if (e.which === 32) {
return false;
}
if (e.which === 0) {
return true;
}
if (e.which < 33) {
return true;
}
input = String.fromCharCode(e.which);
return !!/[\d\s]/.test(input);
}
您可以通过以下方式使用正则表达式实现:
var numbersOnly = document.getElementById("numbersOnly");
numbersOnly.onkeyup = function myFunction() {
numbersOnly.value = numbersOnly.value.replace(/[^0-9]/g, '');
};
<input id="numbersOnly" minlength="8" maxlength="15" required>
使用 html5 标签怎么样?
<input type="number">
所有浏览器都支持它。
你也可以这样用
keyPress(event: any) {
const pattern = /[0-9\+\-\ ]/;
let inputChar = String.fromCharCode(event.charCode);
if (!pattern.test(inputChar) && event.charCode != '0') {
event.preventDefault();
}
}
请不要再使用 String.fromCharCode(event.keyCode),它已被标记为已弃用 MDN,而且它似乎无法在 Firefox 58 中正常工作。一个简单的功能,已在Chrome & 火狐:
onKeypress(event: any) {
const keyChar = event.key;
let allowCharacter: boolean;
if (keyChar === "-" && event.target.selectionStart !== 0) {
allowCharacter = false;
}
else if (
keyChar === "Tab" ||
keyChar === "Enter" ||
keyChar === "Backspace" ||
keyChar === "ArrowLeft" ||
keyChar === "ArrowRight" ||
keyChar === "Delete") {
allowCharacter = true;
}
else {
allowCharacter = (keyChar >= '0' && keyChar <= '9');
}
if (!allowCharacter) {
event.preventDefault();
}
}
我对这段代码也不满意,希望 Angular 中有更好的库。
我创建了一个只允许您键入数字的指令。
import { Directive, ElementRef, HostListener, Input,OnInit,Renderer } from '@angular/core';
@Directive({
selector: 'input[app-numeric-field]'
})
export class NumericValidatorDirective implements OnInit {
@Input('app-numeric-field') maxLength: string;
constructor(private elementRef: ElementRef,private _renderer: Renderer) {}
ngOnInit(): void {
this._renderer.setElementAttribute(this.elementRef.nativeElement, 'maxlength', this.maxLength);
}
@HostListener('keydown', ['$event']) onKeyDown(event) {
let e = <KeyboardEvent> event;
if ([46, 8, 9, 27, 13, 110].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+C
(e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+V
(e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+X
(e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
// 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();
}
}
}
那你就可以这样用了
<input matInput app-numeric-field>
我制定了一个指令来阻止特定输入,类似于此处和其他帖子中发布的其他指令。我基于 this article,但做了一些更改以避免使用已弃用的 keyCode
属性等。
我还取消了对允许的键盘命令的限制(包含 Ctrl
、Command
、Shift
或 Alt
的任何组合键),因为它可能会导致意外限制(例如无法执行 undo/redo 命令)。
指令如下:
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[inputDigitsOnly]',
})
export class InputDigitsOnlyDirective {
private static readonly allowedKeyCodes = [
"Backspace",
"Delete",
"Insert",
"ArrowUp",
"ArrowRight",
"ArrowDown",
"ArrowLeft",
"Tab",
"Home",
"End",
"Enter",
"Digit1",
"Digit2",
"Digit3",
"Digit4",
"Digit5",
"Digit6",
"Digit7",
"Digit8",
"Digit9",
"Digit0",
"Numpad0",
"Numpad1",
"Numpad2",
"Numpad3",
"Numpad4",
"Numpad5",
"Numpad6",
"Numpad7",
"Numpad8",
"Numpad9",
];
@HostListener('keydown', ['$event'])
onKeyDown(e: KeyboardEvent) {
// This condition checks whether a keyboard control key was pressed.
// I've left this 'open' on purpose, because I don't want to restrict which commands
// can be executed in the browser. For example, It wouldn't make sense for me to prevent
// a find command (Ctrl + F or Command + F) just for having the focus on the input with
// this directive.
const isCommandExecution = e.ctrlKey || e.metaKey || e.shiftKey || e.altKey;
const isKeyAllowed = InputDigitsOnlyDirective.allowedKeyCodes.indexOf(e.code) !== -1;
if (!isCommandExecution && !isKeyAllowed) {
e.preventDefault();
return; // let it happen, don't do anything
}
}
}
那么你只需要在输入中添加指令:
<input type="text" inputDigitsOnly>
您可以更改它以满足您的需要。你可以 check the list of available key codes here.
希望对您有所帮助。
我必须限制用户只能在 Angular2->form 的字段中输入数字 我有解决方案,但退格键在输入字段中不起作用 任何人都可以对此有适当的解决方案吗?
form.html
<input (keypress)="keyPress($event)" minlength="8" maxlength="15" required />
form.component.ts
keyPress(event: any) {
const pattern = /[0-9\+\-\ ]/;
let inputChar = String.fromCharCode(event.charCode);
// console.log(inputChar, e.charCode);
if (!pattern.test(inputChar)) {
// invalid character, prevent input
event.preventDefault();
}
}
在 kepress 事件中,它限制用户只能输入数字,但此代码的问题是退格键,Tab 键不是 working.So,此代码与我的预期不符...
退格键不起作用,因为:event.charCode
不会映射到退格键的 0-9
数字之一。
您需要将退格键列入白名单(即 keyCode = 8)。像这样的东西(从我的头顶):
if(event.keyCode != 8 && !pattern.test(inputChar)) {
event.preventDefault();
}
我的回答是:- form.html:
form.component.ts
restrictNumeric = function (e) {
var input;
if (e.metaKey || e.ctrlKey) {
return true;
}
if (e.which === 32) {
return false;
}
if (e.which === 0) {
return true;
}
if (e.which < 33) {
return true;
}
input = String.fromCharCode(e.which);
return !!/[\d\s]/.test(input);
}
您可以通过以下方式使用正则表达式实现:
var numbersOnly = document.getElementById("numbersOnly");
numbersOnly.onkeyup = function myFunction() {
numbersOnly.value = numbersOnly.value.replace(/[^0-9]/g, '');
};
<input id="numbersOnly" minlength="8" maxlength="15" required>
使用 html5 标签怎么样?
<input type="number">
所有浏览器都支持它。
你也可以这样用
keyPress(event: any) {
const pattern = /[0-9\+\-\ ]/;
let inputChar = String.fromCharCode(event.charCode);
if (!pattern.test(inputChar) && event.charCode != '0') {
event.preventDefault();
}
}
请不要再使用 String.fromCharCode(event.keyCode),它已被标记为已弃用 MDN,而且它似乎无法在 Firefox 58 中正常工作。一个简单的功能,已在Chrome & 火狐:
onKeypress(event: any) {
const keyChar = event.key;
let allowCharacter: boolean;
if (keyChar === "-" && event.target.selectionStart !== 0) {
allowCharacter = false;
}
else if (
keyChar === "Tab" ||
keyChar === "Enter" ||
keyChar === "Backspace" ||
keyChar === "ArrowLeft" ||
keyChar === "ArrowRight" ||
keyChar === "Delete") {
allowCharacter = true;
}
else {
allowCharacter = (keyChar >= '0' && keyChar <= '9');
}
if (!allowCharacter) {
event.preventDefault();
}
}
我对这段代码也不满意,希望 Angular 中有更好的库。
我创建了一个只允许您键入数字的指令。
import { Directive, ElementRef, HostListener, Input,OnInit,Renderer } from '@angular/core';
@Directive({
selector: 'input[app-numeric-field]'
})
export class NumericValidatorDirective implements OnInit {
@Input('app-numeric-field') maxLength: string;
constructor(private elementRef: ElementRef,private _renderer: Renderer) {}
ngOnInit(): void {
this._renderer.setElementAttribute(this.elementRef.nativeElement, 'maxlength', this.maxLength);
}
@HostListener('keydown', ['$event']) onKeyDown(event) {
let e = <KeyboardEvent> event;
if ([46, 8, 9, 27, 13, 110].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+C
(e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+V
(e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+X
(e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
// 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();
}
}
}
那你就可以这样用了
<input matInput app-numeric-field>
我制定了一个指令来阻止特定输入,类似于此处和其他帖子中发布的其他指令。我基于 this article,但做了一些更改以避免使用已弃用的 keyCode
属性等。
我还取消了对允许的键盘命令的限制(包含 Ctrl
、Command
、Shift
或 Alt
的任何组合键),因为它可能会导致意外限制(例如无法执行 undo/redo 命令)。
指令如下:
import { Directive, HostListener } from '@angular/core';
@Directive({
selector: '[inputDigitsOnly]',
})
export class InputDigitsOnlyDirective {
private static readonly allowedKeyCodes = [
"Backspace",
"Delete",
"Insert",
"ArrowUp",
"ArrowRight",
"ArrowDown",
"ArrowLeft",
"Tab",
"Home",
"End",
"Enter",
"Digit1",
"Digit2",
"Digit3",
"Digit4",
"Digit5",
"Digit6",
"Digit7",
"Digit8",
"Digit9",
"Digit0",
"Numpad0",
"Numpad1",
"Numpad2",
"Numpad3",
"Numpad4",
"Numpad5",
"Numpad6",
"Numpad7",
"Numpad8",
"Numpad9",
];
@HostListener('keydown', ['$event'])
onKeyDown(e: KeyboardEvent) {
// This condition checks whether a keyboard control key was pressed.
// I've left this 'open' on purpose, because I don't want to restrict which commands
// can be executed in the browser. For example, It wouldn't make sense for me to prevent
// a find command (Ctrl + F or Command + F) just for having the focus on the input with
// this directive.
const isCommandExecution = e.ctrlKey || e.metaKey || e.shiftKey || e.altKey;
const isKeyAllowed = InputDigitsOnlyDirective.allowedKeyCodes.indexOf(e.code) !== -1;
if (!isCommandExecution && !isKeyAllowed) {
e.preventDefault();
return; // let it happen, don't do anything
}
}
}
那么你只需要在输入中添加指令:
<input type="text" inputDigitsOnly>
您可以更改它以满足您的需要。你可以 check the list of available key codes here.
希望对您有所帮助。