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 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
JavaScript 指导方针
2007/04/05 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
同一个网页中实现多个JavaScript特效的方法
2015/02/02 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
教师反邪教心得体会
2016/01/15 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
swagger如何返回map字段注释
2021/07/03 Java/Android
MySQL约束超详解
2021/09/04 MySQL