当按下"回车键"时执行Submit事件

最新推荐文章于 2023-10-11 09:10:34 发布

原创最新推荐文章于 2023-10-11 09:10:34 发布 · 602 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #JSP #ViewUI

JSP 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一个简单的HTML表单，该表单通过JavaScript实现了当用户按下回车键时进行表单提交的功能。代码中包含了一个表单元素及用于监听键盘事件的JavaScript函数。


<form id="loginForm" name="loginForm" action="login.do" onsubmit="" onkeydown="javascript:keyDown();" method="POST">
</form>


function keyDown() {  
  if(window.event.keyCode == 13){
  //window.event.keyCode=9;//模拟Tab键
  if(check()){
    document.getElementById("loginForm").submit(); //　当按下"回车键"时执行Submit事件
    }         
  }
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yifeixiang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JS判断键盘是否按的回车键并触发指定按钮点击操作的方法

12-03

在JavaScript编程中，有时我们需要监听用户的键盘输入，特别是当用户按下回车键时，可能希望执行特定的操作，比如触发某个按钮的点击事件。这在表单提交或搜索功能中非常常见。本文将详细介绍如何利用JavaScript实现...

禁止按回车键提交表单的方法

09-03

在网页开发中，用户按下回车键通常会触发表单的提交操作，这在某些情况下可能会导致意外的结果，比如在搜索框中按回车可能会刷新整个页面。本文将详细讲解如何禁止用户通过回车键来提交表单，以避免这种不必要的行为...

参与评论您还未登录，请先登录后发表或查看评论

onkeydown事件处理回车后提交表单

netjxz的专栏

01-08

1245

下面的五种方法都可以帮你解决这种问题1.javascript>function document.onkeydown(){ if (event.keyCode == 13) { if (event.srcElement == document.getElementById(´´)) document.getElementById(´´).cli

回车对应相应表单的提交按钮

weixin_30457065的博客

01-03

<body onkeydown=todo()> <script language=javascript>  ...

在 IE下，页面只有一个text的时候，回车将自动submit的问题

chh_jiang的专栏

07-02

2489

<br />这个问题是由测试中发现的一个Bug引出来的。<br />Bug具体描述如下：<br />在输入框中输入内容，按回车键，默认焦点聚焦在入口菜单上。<br />如果开始点击'查询'按钮，以后再输入条件，然后回车的话，焦点定位是没问题的。<br /> <br />经查，之所以引起这个Bug，实际上是因为页面上只有一个input type="text"，后来google了一下，发现了《在 IE下，页面只有一个text的时候，回车将自动submit》这篇文章，原来当只有一个text框时，按回车会自动提交。

回车键触发表单提交的问题

Java_Mike的博客

06-11

1494

本文转自http://blog.youkuaiyun.com/dac55300424/article/details/39158759 我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。要控制这些行

jsp中如何实现按下回车键自动提交表单

10-21

总结来说，通过JavaScript（或者使用库如jQuery）监听键盘事件，检查回车键的按键码，并在检测到回车键被按下时触发表单的提交，可以在JSP中实现按下回车键自动提交表单的功能。这样，用户无需手动点击提交按钮，只...

onkeydown事件解决按回车键直接提交数据的需求

09-05

结合以上知识点，我们可以编写出以下代码实现当用户在登录页面按下回车键时提交表单的功能： ```html (event)"> function checkEnter(e) { if ((window.event && window.event.keyCode == 13) || e.which == 13)...

ElementUI input输入、button enter回车事件

Cheung1992的博客

10-11

7086

1、ElementUI el-input 点击回车会导致页面刷新，输入内容丢失； 2、el-button点击后，再次按回车会重复触发； 3、如何实现多个输入框回车触发同一个事件

Submit浏览器默认回车触发提交

qq_30484995的博客

09-14

1043

edge浏览器submit默认提交

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

qq_37609418的博客

06-15

8837

在Form表单中input会自动响应回车事件。这是表单的默认提交动作。表单的提交行为，可以用两种方式定义，一是form表单自身，二是form表单的button元素(包括type='submit’的input标签，以及type=‘submit’的button元素，button元素type为Submit)。而点击Enter键会触发form表单提交。这被称为隐式提交，如果要阻止回车键提交表单，可以在form标签内添加如下代码 ng-keydown 指令不会覆盖元素的原生 onkeydown 事件, 事件触发时，n

表单form中对回车键的感应

笃行淡言

04-16

650

我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则： 1. 如果表单里有一个type=”submit”的按

ASP.NET中多按钮回车键触发form的submit的实现方法

weixin_30776545的博客

09-01

189

一般网站登录、注册填写完信息后，直接回车提交就可以登录或者注册了，没必要一定要单击鼠标确认, 能不能做到实现这样的功能啊？当然可以,在ASP.NET中,一个form中的第一个加入到form中的按钮就是默认按钮，按回车就可以触发点击事件。那么如果一个页面多个submit按钮，我怎么知道用户回车是想登录还是注册还是其他呢？，我们可不可以实现这样的功能呢？答案也是肯定的，下面介绍两种方法...

Form表单(回车)提交问题

dingchuo3376的博客

10-10

267

我们有时候希望回车键敲在文本框（inputelement）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则： 1.如果表单里有一个type=”su...

react中实现原生enter/回车事件及antdesign组件实现方式

dbi9068的博客

03-12

1993

先直接上核心代码： this.goToHomePage换成自己逻辑自己写的时候直接把this.goToHmoPage()换成自己的逻辑就行了，还有注意一点的是：需要传个空函数，不然会报错在componentWillMount移除事件监听是防止浪费内存影响性能。最后在antdesign实现enter回车的方式如下： htmlTyp...

按下enter键让提交页面的某个方法

程序员超哥的博客

03-08

829

最近做一个前端页面，在一个分页和查询里面，要用enter键会自动提交，先提交查询的内容，如果查询为空再提交分页的页数代码如下 document.onkeydown = function (e) { if (!e) e = window.event; if ((e.keyCode || e.which) == 13) { toQuote();

JavaScript禁止没有回车事件的input触发submit提交表单事件，已有回车触发事件的input不受影响

ASP.NET

04-24

2123

document.onkeydown = function(event) {//禁止没有回车事件的input触发submit提交表单事件，已有回车触发事件的input不受影响 switch (event.keyCode) { case 13: var obj = event.srcElement || event.target

vue按钮回车键触发事件enter

最新发布

03-18

### 实现 Vue 中按钮通过按下回车键触发点击事件在 Vue 开发中，可以通过绑定 `@keyup.enter` 事件来监听用户的回车操作并触发动态行为。以下是具体实现方式以及注意事项。 #### 绑定 `@keyup.enter` 到按钮可以将 `@keyup.enter` 直接绑定到输入框或其他可聚焦的组件上，在用户按回车时调用指定的方法： ```html <template> <div>  <input type="text" placeholder="请输入内容..." @keyup.enter="handleButtonClick" />  <button id="submitButton" @click="handleButtonClick">提交</button> </div> </template> <script> export default { methods: { handleButtonClick() { console.log('按钮被点击或回车键被按下'); // 执行其他业务逻辑... } } }; </script> ``` 上述代码实现了当用户在输入框中按下回车键时，自动执行与按钮点击相同的操作[^1]。 #### 处理多次触发问题如果页面中有多个事件可能同时触发（例如 `@keyup.enter` 和 `@blur`），可能会导致重复调用目标函数。解决此问题的一种常见方法是阻止不必要的默认行为或者调整事件优先级[^2]。以下是一个优化后的例子，防止 `@keyup.enter` 和 `@blur` 同时触发： ```html <template> <div> <el-input class="input-new-tag" v-model="inputValue" @keyup.enter.native="onEnterKey($event)" @blur="onBlurEvent"> </el-input> </div> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { onEnterKey(event) { event.target.blur(); // 主动失去焦点以避免 blur 再次触发 this.handleInputConfirm(); }, onBlurEvent() { // 如果不需要额外处理，则无需定义任何逻辑 }, handleInputConfirm() { console.log('确认输入:', this.inputValue); } } }; </script> ``` 在此示例中，通过手动调用 `$event.target.blur()` 来消除双重触发的可能性[^3]。 #### 防止表单意外刷新对于包含 `<form>` 的场景，默认情况下按下回车可能导致整个页面重新加载。为了避免这种情况发生，可以在相关方法中显式调用 `event.preventDefault()`[^4]： ```javascript methods: { handleQuery(event) { event.preventDefault(); // 阻止表单提交引起的页面刷新 alert('查询已启动！'); } } ``` 这样即使用户在表单内按键也不会影响用户体验。 ---