Angular 自定义属性指令-禁止input框输入空格-以及删除复制内容中的空格

创建一个ts文件，并在module.ts中定义

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { FormGroup, FormControl, NgControl } from '@angular/forms';
@Directive({selector: '[input-noSpace]'})
export class NoSpace {constructor(private elementRef: ElementRef, private control : NgControl) {}@HostListener("keydown", ["$event"])keydownFun(evt) {        if (evt.key.trim() == '') {evt.preventDefault();}}@HostListener("keyup", ["$event", "$event.target"])keyupFun(evt, target) {        if (target.value) {this.control.control.setValue(target.value.replace(/(\s*)/g, ""));}}
}

然后直接在input框中加入属性input-noSpace就可以使用了

(注意input框要绑定ngmodel)

<input type="test" name="managerNo" id="managerNo" [(ngModel)]="info.managerNo" required#idClass="ngModel" (keyup)="doCode()" maxlength="50" input-noSpace/></td>

参考的博客找不到了，过了好久才想起来总结。

Angular 自定义属性指令-禁止input框输入空格-以及删除复制内容中的空格相关推荐

如何禁止input框输入特殊字符
如何禁止input框输入特殊字符前端开发中可能会碰到input框禁止输入特殊字符的情况,下面是解决办法,输入框内只能输入字母数字和基本汉字,亲测有效. HTML部分 <div class=&q ...
input如何禁止文本框输入的方法
禁止文本框输入有以下四种方法: 1.设置input为只读状态,代码如下: <input type="text" readonly="readonly" v ...
vue,原生html—input框输入银行卡4位分开、手机号344分隔
vue,原生html-input框输入银行卡4位分开.手机号344分隔效果图: 1.uni-app写input框 (注意type类型不能为number,这是一个坑,我理解到-数字框只能输入数字不能显 ...
js控制input框输入数字时，累计求和
input框输入数字时,自动开始计算累加 <div class="form-group"> <label for="inputPassword3&quo ...
Java 去除excel表格内容中的空格
从excel表格中读取数据 int i=1; Sheet sheet; Workbook book; Cell cell1,cell2; try { //in.xls为要读取的excel文件名 boo ...
批处理：批量删除所有文件名中的空格
批量删除所有文件名中的空格,记录下写的批处理文件方式一: @echo off&setlocal enabledelayedexpansion for /f "delims=&quo ...
input框输入身份证时实现动态脱敏
输入时实现动态脱敏现有一需求在输入框内输入身份证的时候只保留前两位和后两位剩下的用 *代替也就是 12345678910 就会输入时动态呈现为 12********10 思路在input框 ...
html页面input框输入不了,input框不能输入问题
input框不能输入问题今天在写程序设计登录页面的时候遇到了一个问题:输入框不能输入! 就是我写着写着想测试一下功能,就发现输入框不能输入了.???还能出现这种问题??就很疑惑,然后就搜了搜无法输入 ...
限制Input框输入非法值
是通过正则来限制输入框输入的值(通过正则就可以自定义规则) 1. 先提前声明了两个数据,一个是与后端交互的合法值,一个是展示的临时值 // 表单信息const calculationForm = re ...

Angular 自定义属性指令-禁止input框输入空格-以及删除复制内容中的空格

(注意input框要绑定ngmodel)

参考的博客找不到了，过了好久才想起来总结。

Angular 自定义属性指令-禁止input框输入空格-以及删除复制内容中的空格相关推荐

最新文章

热门文章