Ctrl+Enter提交

最新推荐文章于 2025-12-03 10:31:21 发布

原创最新推荐文章于 2025-12-03 10:31:21 发布 · 752 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #button #测试 #浏览器 #百度 #ie

HTML+CSS 专栏收录该内容

4 篇文章

订阅专栏

在网上百度了一下，学会了最基本的 Ctrl+Enter 提交的原理，下面做个学习笔录，用 js 实现：

解决思路：
在表单中捕获按键事件，判断用户是否按下Ctrl键和Enter键，是的话就用表单的submit方法提交表单。

<textarea name="content" onkeydown="if(event.ctrlKey&&event.keyCode==13)this.submit()"></textarea>

注意：设定textarea的onkeydown事件，只有当光标锁定文本框时才有效。

提示：按键的事件句柄除了onkeydown外，还有onkeyup和onkeypress；判断左边的Ctrl键还可以用event.ctrlLeft。

完整测试代码如下：（我只测试了IE浏览器；该代码摘自：http://zhao103804.iteye.com/blog/797426）

<html>
<head>
<script>
function test()
{
  if(event.ctrlKey && event.keyCode=='13')
  alert("submit");
}
</script>
</head>
<body onkeydown="if(event.ctrlKey && event.keyCode=='13') test();"><!--这样只要光标在页面内任何位置按下ctrl+enter键都可以提交-->
<form method="post" name="form1">
  <input type="text" onkeydown="test();">
  <input type="button" value="test" onclick="test()"> 
</form>
</body>
</html>

特别说明：

本例需要掌握的是：
    如何获取用户的按钮代码，还有Ctrl键的识别。
    keyCode 设置或获取与导致事件的按键关联的 Unicode 按键代码。
    ctrlKey 设置或获取 Ctrl 键的状态。
    ctrlLeft 设置或获取左 Ctrl 键的状态。