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 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 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 VS ASP
2006/10/09 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
python制作一个桌面便签软件
2015/08/09 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
python如何将两个txt文件内容合并
2019/10/18 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
python Tornado框架的使用示例
2020/10/19 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
小学教师自我鉴定
2013/11/07 职场文书
优秀应届生推荐信
2013/11/09 职场文书
医院护士的求职信
2014/01/03 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
实习生辞职信范文
2015/03/02 职场文书
教师党员个人自我评价
2015/03/04 职场文书
现场施工员岗位职责
2015/04/11 职场文书
政审证明范文
2015/06/19 职场文书