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

 更新时间:2015年01月31日 10:43:46   投稿:junjie  
这篇文章主要介绍了JavaScript监听和禁用浏览器回车事件实例,本文直接给出示例代码,需要的朋友可以参考下

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>

相关文章

  • 详解js中构造流程图的核心技术JsPlumb(2)

    详解js中构造流程图的核心技术JsPlumb(2)

    这篇文章主要介绍了js中构造流程图的核心技术JsPlumb,jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等,需要的朋友可以参考下
    2015-12-12
  • 微信小程序二维码生成工具 weapp-qrcode详解

    微信小程序二维码生成工具 weapp-qrcode详解

    这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2021-10-10
  • JavaScript事件监听之键盘事件详细介绍

    JavaScript事件监听之键盘事件详细介绍

    在实际应用中我们常常会遇到监听按键输入和鼠标点击事件,下面这篇文章主要给大家介绍了关于JavaScript事件监听之键盘事件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 简述Matlab中size()函数的用法

    简述Matlab中size()函数的用法

    size()函数用来获取矩阵的行数和列数。接下来通过本文给大家介绍matlab中size()函数的用法,需要的朋友一起学习吧
    2016-03-03
  • 一文了解你不知道的JavaScript生成器篇

    一文了解你不知道的JavaScript生成器篇

    ES6引入了一个新的函数类型,发现它并不符合这种运行到结束的特性。这类新的函数被称为生成器。生成器的出现是我们知道原来有时代码并不会顺利的运行,可以通过暂停的方式进行异步回调,让我们摒弃了此前的认知。本文就来聊聊JavaScript中生成器的相关知识
    2022-11-11
  • 通过javascript实现段落的收缩与展开

    通过javascript实现段落的收缩与展开

    这篇文章主要介绍了通过javascript实现段落的收缩与展开,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-06-06
  • JavaScript的11个小技巧整理

    JavaScript的11个小技巧整理

    这篇文章介绍了JavaScript的11个小技巧,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • JavaScript数组函数unshift、shift、pop、push使用实例

    JavaScript数组函数unshift、shift、pop、push使用实例

    这篇文章主要介绍了JavaScript数组函数unshift、shift、pop、push使用实例,本文先是讲解了声明数组的方法,然后对4个函数使用给出了一些例子,需要的朋友可以参考下
    2014-08-08
  • Javascript函数缓存的实现及应用场景

    Javascript函数缓存的实现及应用场景

    Javascript函数缓存是一种提高网页性能的重要技术,通过将函数结果存储在缓存中,避免重复计算,从而提高页面加载速度和响应速度,本文主要介绍了Javascript函数缓存的实现及应用场景,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • 当鼠标滑过超链接出现提示框效果实例

    当鼠标滑过超链接出现提示框效果实例

    当鼠标滑过超链接出现提示框效果实例,需要的朋友可以参考一下
    2013-04-04

最新评论