防止用户触发文本框中的空间 [英] Prevent user from firing space in a textbox

问题描述

以前，我使用jQuery处理问题的方法如下:

$("#textInput").keydown(function (e) {
  return e.which !== 32;
});

您将如何使用新的Angular和Typescript?

解决方案

或者简单地;

<input type="text" (keydown.space)="$event.preventDefault();">

---

---

我设法创建了一个方便的指令，该指令可以接受您提供的键号并阻止它们

@Directive( {
    selector : '[prevent-keys]',
    host : {
        '(keydown)' : 'onKeyUp($event)'
    }
} )
export class PreventKeyseDirective {
    @Input( 'prevent-keys' ) preventKeys;
    onKeyUp ( $event ) {
        if ( this.preventKeys && this.preventKeys.includes( $event. keyCode ) ) {
            $event.preventDefault();
        }
    }
}

然后像

一样使用它

 <input [prevent-keys]="[32, 37 , 38 , 39 , 40 ]" type="text">

这将防止按空格键，，，，，，

Previously, I dealt with the problem using jQuery as follows:

$("#textInput").keydown(function (e) {
  return e.which !== 32;
});

How would you approach it with the new Angular and Typescript?

解决方案

Or simply ;

<input type="text" (keydown.space)="$event.preventDefault();">

---

---

I managed to create a handy directive which accepts what ever key number you give it and prevents them

@Directive( {
    selector : '[prevent-keys]',
    host : {
        '(keydown)' : 'onKeyUp($event)'
    }
} )
export class PreventKeyseDirective {
    @Input( 'prevent-keys' ) preventKeys;
    onKeyUp ( $event ) {
        if ( this.preventKeys && this.preventKeys.includes( $event. keyCode ) ) {
            $event.preventDefault();
        }
    }
}

And then use it like

 <input [prevent-keys]="[32, 37 , 38 , 39 , 40 ]" type="text">

This will prevent space , up , left , down , right keys :D

这篇关于防止用户触发文本框中的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！