JavaScript监听和禁用浏览器回车事件实例


Posted in Javascript onJanuary 31, 2015

js监听浏览器回车事件,可以支持ie6+,火狐,谷歌等浏览器。

<html>

<head>

<script type="text/javascript">

//注册键盘事件

document.onkeydown = function(e) {

 //捕捉回车事件

 var ev = (typeof event!= 'undefined') ? window.event : e;

 if(ev.keyCode == 13) {

  alert('捕捉到了回车事件!');

 }

}

</script>

</head>

<body />

</html>

那么,如何捕捉指定DOM对象的回车事件?这里以input标签为例说明:

<html>

<head>

<script type="text/javascript">

//注册键盘事件

document.onkeydown = function(e) {

 //捕捉回车事件

 var ev = (typeof event!= 'undefined') ? window.event : e;

 if(ev.keyCode == 13 && document.activeElement.id == "msg") {

  alert("获取到内容:" + document.activeElement.value);

 }

}

</script>

</head>

<body>

<input type="text" id="msg" value="" />

</body>

</html>

那么,js如何禁用浏览器回车事件?我们知道,在HTML表单区域内,按回车时浏览器的默认行为是自动提交表单。下面以这个为例说明js如何去禁用浏览器回车事件:

<html>

<head>

<script type="text/javascript">

//注册键盘事件

document.onkeydown = function(e) {

 //捕捉回车事件

 var ev = (typeof event!= 'undefined') ? window.event : e;

 if(ev.keyCode == 13 && document.activeElement.id == "msg") {

  return false;//禁用回车事件

 }

}

</script>

</head>

<body>

<form action="form.php">

<input type="text" id="msg" name="msg" value="" />

<input type="submit" value="submit"/>

</form>

</body>

</html>
Javascript 相关文章推荐
Javascript简单实现可拖动的div
Oct 22 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
原生js实现照片墙效果
Oct 13 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 #Javascript
JavaScript实现的双向跨域插件分享
Jan 31 #Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 #Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 #Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 #Javascript
jQuery知识点整理
Jan 30 #Javascript
浅谈jquery回调函数callback的使用
Jan 30 #Javascript
You might like
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
围观tangram js库
2010/12/28 Javascript
JQuery与JSon实现的无刷新分页代码
2011/09/13 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
理解JS绑定事件
2016/01/19 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python书籍信息爬虫实例
2018/03/19 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
基于python实现地址和经纬度转换
2020/05/19 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
新大陆软件面试题
2016/11/24 面试题
门卫岗位职责
2013/11/15 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
节约用电倡议书
2015/04/28 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书