html 回车事件 form表单回车提交

最新推荐文章于 2024-02-21 11:05:53 发布

torpidcat

最新推荐文章于 2024-02-21 11:05:53 发布

阅读量3.5k

点赞数 1

分类专栏： HTML

原文链接：https://zhidao.baidu.com/question/145395482.html

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

第一种：

https://zhidao.baidu.com/question/145395482.html

针对整个页面，body中监听回车事件，监听到回车键操作(键盘回车键按下事件的反馈值为13) 则执行对应的操作：

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body onkeydown="if(event.keyCode==13){login_btn.click()}">
<div class="login_container">
    <div class="login_btn" id="login_btn" onclick="loginAction()">登录</div>
</div>
<script>
    function loginAction() {
        alert("回车啦");
    }
</script>
</body>
</html>

第二种：

https://blog.csdn.net/qq_39716220/article/details/80858397

https://fly.layui.com/jie/26587/

针对form表单，监听到回车键按下，去执行指定操作

<form id="formId">

  项目：<input type="text" name="merchantOrderTitle" placeholder="项目名"/>
  <a id="searchId" onclick="doSubmit()">搜索</a>
</form>


<script th:inline="javascript">
    function doSubmit(){
        //提交表单操作
    }
    //键盘回车操作监控
	document.onkeydown = function(e) {
		e = e || window.event;
		if(e.keyCode == 13) {
			$("#searchId").click();//提交按钮的id.click();
			return false;//防止页面跳转刷新掉
		}
	}
</script>

其他方式：

https://www.cnblogs.com/sxhlf/p/6734628.html