1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Form表单 回车(Enter)提交表单问题

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

时间:2018-12-19 22:43:15

相关推荐

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。