Question

我有一个在<input type="text" />元素上实现的自定义指令：

<form #testForm="ngForm" (ngSubmit)="submit()">
    <input type="text" name="testInput" testDirective />
    <button type="submit">Submit</button>
</form>

该指令在HostListener事件中有一个keyup：

@Directive({
    selector: '[testDirective]'
})
export class TestDirective {
    @HostListener('keyup', ['$event'])
    onkeyup(event: any)
    {
        // Do stuff

        if (event.keyCode == 13) { // 13 = enter
            event.stopPropagation();
            return false;
        }
    }
}

正如您所看到的，我已使用event.stopPropogation()和return false符合其他问题的建议，但这不起作用，当输入密钥时表单仍在提交被按下了。

但是，如果我将(keydown.enter)="$event.preventDefault()"放在输入元素本身上，它会产生预期效果并阻止表单提交。

<input type="text" name="testInput" testDirective (keydown.enter)="$event.preventDefault()" />

这种方法对我来说并不是特别理想，因为我想以编程方式控制输入键按下时禁用表单提交。

是否有人知道为什么stopPropagation() / return false方法在这种情况下不起作用？

Answer 1

错误只是一个关键错误：

SELECT CONTRACT_ID
FROM PaymentGraph
WHERE PAYMENT_DATE <= curdate() - INTERVAL 1 MONTH
    AND STATE = 'A'
    AND ifnull(paid, 0) < amount;

顺便说一句，在这种情况下，@Directive({ selector: '[testDirective]' }) export class TestDirectiveDirective { @HostListener('keydown', ['$event']) //keydown, not keyup onKeyDown(event: any) { // Do stuff if (event.keyCode === 13) { // 13 = enter return false; } } }也是不必要的，至少从我（通常是有限的）测试开始。 YMMV

Answer 2

您的两种方法之间的区别在于，一种方法使用event.stopPropogation()而另一种方法使用event.preventDefault()。请注意，在使用event.preventDefault()的工作中。从Web API docs开始，Event.stopPropogation执行以下操作：

防止当前事件在捕获和捕获中进一步传播鼓泡阶段。

换句话说，事件仍然会触发，但不允许冒泡DOM树。为了实际停止事件，您希望使用Event.preventDefault，因为您使用的是第二种方法中使用的输出绑定。另外，来自Web API docs：

[Event.preventDefault]告诉用户代理该事件是否发生如果没有明确处理，则不应将其默认操作视为通常会是。

基本上，这个onkeyup函数应该做你想要的：

  @HostListener('keyup', ['$event'])
  onkeyup(event: any) {
    // Do stuff

    if (event.keyCode == 13) { // 13 = enter
        event.preventDefault();
        return false;
     }
   }

Answer 3

触发是由于您处于表单中，并且您单击提交类型输入。

删除您的表单标签，通过点击事件按钮更改您的输入，您将很高兴。

Angular2阻止在指令内按下回车键提交表单

3 个答案: