防止用户在文本输入字段中输入某些字符
[英]Prevent user from typing certain characters into a text input field
问题描述
我不确定这叫什么。 这真的很简单。 我尝试使用管道，但出现错误。 我正在寻找一些简单的东西：
<input [(ngModel)]="order.name | lettersOnlyPipe"/>
那行不通。 我该怎么做才能做到这一点？
5 条回复
1楼 Aravind 2 2017-03-31 22:48:22
2楼 snorkpete 1 2017-03-31 22:48:16
你最好的选择是你自己的指令。
一些让你前进的简单想法：
- 您的指令监视其宿主元素上的输入事件
- 在每个输入事件上，您检查输入值是否有效，如果无效，则将输入设置回其旧值
或者，* 监视 keydown 事件，并在每个 keydown 上检查该键是否为有效键 - 如果不是，请将您的输入设置回其旧值
这是基本的方法。 您可以查看angular 文档中的highlight 指令示例作为入门指南。
3楼 sivi911 1 2017-11-24 13:38:43
我在这里发布了类似的回复，您只需要更改正则表达式（从中删除数字和阿拉伯字符）。 希望能帮助到你。
4楼 Umesh Pathak 1 2018-06-07 04:53:01
input [name]="fullName" pattern="[a-zA-Z ]*" ngModel
在 angular 4 中，您可以使用 Pattern 属性并将模式指定为= [a-zA-Z ]仅用于字母。
5楼 tleveque 1 2021-03-04 13:55:04
使用模式属性不会阻止在输入字段内输入任何内容。 它只会将其标记为无效。 您必须使用指令才能这样做。 这是一个简单的示例，它可以防止在输入字段中输入除正数以外的任何内容：
import {Directive, HostListener} from '@angular/core';
@Directive({
selector: 'input[dsancNumeroPositif]'
})
export class NumeroPositifDirective {
acceptedCharacters: string[] = ['.', ',', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
constructor() { }
@HostListener('keypress', ['$event']) onInput(event: KeyboardEvent): void
{
if (!this.acceptedCharacters.includes(event.key)) {
event.preventDefault();
}
}
}
问题未解决？试试以下方法：
Angular 2 - 当用户在输入字段中键入字符时，突出显示DIV的文本
[英]Angular 2 - Highlight text of a DIV as user types characters in an input field
iPad - 在输入字段中输入时文本不可见（type =“text”）
[英]iPad - Text not visible when typing into input field (type=“text”)
如何防止某些击键出现在Angular反应形式输入字段中
[英]How to prevent certain keystrokes from appearing in an Angular reactive form input field
Angular-如果输入无效，如何防止输入中的文本显示
[英]Angular- How to prevent text in input from showing if input is invalid
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.