Form表单 回车(Enter)提交表单问题

在Form表单中input会自动响应回车事件。这是表单的默认提交动作。

表单的提交行为，可以用两种方式定义，一是form表单自身，二是form表单的button元素(包括type='submit’的input标签，以及type=‘submit’的button元素，button元素type为Submit)。

而点击Enter键会触发form表单提交。这被称为隐式提交，

• 当用户在一个表单的input标签按enter按钮时，浏览器会找到表单中的第一个提交按钮(submit button)，并触发click，同时提交表单。
• 如果一个表单里没有任何submit button。当这个表单只有一个input元素时，在这个input标签按enter键会隐式触发表单提交，
• 表单有多个input标签时就不会触发。

如果要阻止回车键提交表单，可以在form标签内添加如下代码

<form class="form-horizontal" id="myForm" novalidate onkeydown=if(event.keyCode==13){return false;}"

ng-keydown 指令不会覆盖元素的原生 onkeydown 事件, 事件触发时，ng-keydown 表达式与原生的 onkeydown 事件将都会执行。

表单使用原生的onkeydown事件，判断按键为回车键时阻止表单提交。input输入框使用了ng-keydown事件

按键敲击的事件顺序:

1. Keydown
2. Keypress
3. Keyup

AngularJS中按键事件

1. ng-keydown 规定按下按键事件的行为
2. ng-keypress 规定按下按键事件的行为
3. ng-keyup 规定松开按键事件的行为

但是此时有一个问题：对于input(type = ‘text’)的输入框在想使用enter来触发事件是没有效果的。

可以通过以下方式来触发

<input class="inputcontext" type="text" (keyup.enter)="addEmail()" nz-input placeholder="輸入Email" formControlName="email" />

标签：Form表单  回车提交  回车键  前端笔记