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事件
按键敲击的事件顺序:
KeydownKeypressKeyup
AngularJS中按键事件
ng-keydown 规定按下按键事件的行为ng-keypress 规定按下按键事件的行为ng-keyup 规定松开按键事件的行为
但是此时有一个问题:对于input(type = ‘text’)的输入框在想使用enter来触发事件是没有效果的。
可以通过以下方式来触发
<input class="inputcontext" type="text" (keyup.enter)="addEmail()" nz-input placeholder="輸入Email" formControlName="email" />