Question

以前，我使用jQuery处理问题如下：

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

你会如何使用新的Angular和Typescript来处理它？</ p>

Answer 1

或者简单地说;

<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">

这将阻止空格，向上，向左，向下，向右键：D

Answer 2

您应该在模板中使用事件绑定，如下所示：

<input type="text" (keydown)="keyDownHandler($event)"/>

然后在您的控制器中定义keyDownHandler()功能：

keyDownHandler(event: Event) {
    if (event.which === 32)
        event.preventDefault();
}

Answer 3

我只是在我的班级顶层$这样的

 declare var $: any;

您可以在解释

时在代码中使用$

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

否则在{2}和keyup之类的angular2中有各种方法，依此类推你也可以使用

Answer 4

在组件中，您应该实现此方法。

onKeydown(event) {
if (event.keyCode === 32 ) {
  return false;
}

}

此后，在HTML标记中，

<input type="text" class="form-control col-md-10" placeholder="First Name" (keydown)="onKeydown($event)" [value]="firstName" #newFirstName>

防止用户在文本框中释放空间

4 个答案: