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

╰半夏微凉° 2022-12-14 12:26 82阅读 0赞

创建一个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, ""));
            }
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNjA4NA_size_16_color_FFFFFF_t_70_pic_center]  
然后直接在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>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNjA4NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/762341b76d1940eebd157a861cda78c8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序禁止输入空格

微信小程序禁止输入空格当用户输入账号或者密码的时候，可能会有输入空格的情况，但是实际需要是不能够有空格的，所以我们要做一个去除空格，并且适应所有input的name参数

妖狐艹你老母/ 2023年07月23日 04:59/ 0 赞/ 53 阅读

相关 react+antd自定义校验以及校验空格

自定义校验，在form.Item中添加`rules->validator` <Form.Item labelCol

ゞ浴缸里的玫瑰/ 2022年12月29日 11:30/ 0 赞/ 330 阅读

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

创建一个ts文件，并在module.ts中定义 import { Directive, ElementRef, HostListener, Input } from

╰半夏微凉°/ 2022年12月14日 12:26/ 0 赞/ 83 阅读

相关 UniApp 输入框防止输入空格

`UniApp` 的 `input` 标签虽然提供了`@input`事件，但是仅仅是小程序能使用，所以在这里使用了原生的 `onkeypress` 事件来避免空格的输入。【

迷南。/ 2022年12月12日 13:54/ 0 赞/ 540 阅读

相关正则表达式: input框禁止输入空格:不能只有空格、不能有空格、不能为空的判断

1.只有中间和最后能输入空格(如果让最后不能输入空格则把最后一个\改成+)，(如果想让开头可以输入空格则把+改成\) ^[^\s]+[\s].$ 2.不能输入空格

朱雀/ 2022年12月10日 03:40/ 0 赞/ 217 阅读

相关 vue通过自定义指令使input输入框自动获取焦点

在部分开发场景中我们需要input输入框自动获取焦点我们可以通过以下代码实现使用自定义指令 v-focus <template> <el

我就是我/ 2022年08月28日 12:44/ 0 赞/ 198 阅读

相关 angular 自定义指令

1：首先获取module对象 var myAppModule = angular.module('myApp', \[\]); 2：定义指令 my.directive('

短命女/ 2022年08月25日 05:14/ 0 赞/ 201 阅读

相关 Angular自定义指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

左手的ㄟ右手/ 2022年06月10日 02:52/ 0 赞/ 240 阅读

相关 VUE 项目去除 input 框值所有空格、vue 组件去除空格、input 去除空格

[前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。][Link 1] 1.以下所有方法我都试过：不行。 str.

小咪咪/ 2022年04月22日 15:26/ 0 赞/ 1220 阅读

相关设置input不能输入空格

<input class="common-text required" id="imageUrl" name="title" size="50" value=""

缺乏、安全感/ 2022年04月17日 03:13/ 0 赞/ 215 阅读