防止用户在文本框中触发空格答案

【问题标题】：Prevent user from firing space in a textbox防止用户在文本框中触发空格
【发布时间】：2016-12-29 07:33:53
【问题描述】：

之前我使用jQuery处理的问题如下：

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

您将如何使用新的 Angular 和 Typescript 来处理它？

【问题讨论】：

Get which key pressed from (keypress) angular2的可能重复

标签： angular typescript

【解决方案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

【讨论】：

(keydown.space) 是什么意思？ @Milad 请添加一些解释

【解决方案2】：

您应该像这样在模板中使用事件绑定：

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

然后在你的控制器中定义keyDownHandler()函数：

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

【讨论】：

【解决方案3】：

在组件中你应该实现这个方法。

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>

【讨论】：

您的答案到底对线程中的现有答案添加了什么，例如this one？
这个答案我很有趣，因为我真的不知道“return false”如何工作。

【解决方案4】：

我只是像这样将$贴在我班的顶部

 declare var $: any;

您可以按照您的说明在代码中使用$

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

否则 angular2 中有多种方法，例如 keyup 和 keydown 等等，您也可以使用这些方法

【讨论】：

这不是一个好的解决方案。混合使用 jQuery 和 Angular 并不是一个好习惯。正如其他答案所提供的那样，有很多更简单的方法可以做到这一点。
@ChrisKooken 我理解人，但是在撰写答案时，与今天相比，实现这一目标的方法并不多:) 此外，我根据所提出的问题提供了答案。