javascript为按钮注册回车事件(设置默认按钮)的方法


Posted in Javascript onMay 09, 2015

本文实例讲述了javascript为按钮注册回车事件(设置默认按钮)的方法。分享给大家供大家参考。具体如下:

首先不得不说,在JS方面,自己真的是个不折不扣的菜鸟。对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得。今天先来点开胃的,说一下如何设置一个默认按钮,就是不管焦点在不在按钮上,只要按下回车,就等于触发了按钮的单击事件。

代码非常简单,要完成这个功能,只需几行代码:

//为keyListener方法注册按键事件
document.onkeydown=keyListener;
function keyListener(e){
 // 当按下回车键,执行我们的代码
 if(e.keyCode == 13){
 //我们要做的事情
 }
}

额,貌似有点太简单了,就这样完成一篇博客,我都有点不好意思了。最后为大家附上一个小程序的实例吧:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>计算器</title>
  <script type="text/javascript" >
   function calculate() {
    var a = document.getElementById("pre-tax").value;
    if (parseInt(a)>8000) {
     document.getElementById("interest").value =800+ (a - 8000)*15/100;
    } else {
     document.getElementById("interest").value =a/10;
    }
   }
   //为keyListener方法注册按键事件
   document.onkeydown=keyListener;
   function keyListener(e){
    // 当按下回车键,执行我们的代码
    if(e.keyCode == 13){
     calculate();
    }
   }
  </script>
 </head>
 <body >
  税前薪资:<input type="text" id="pre-tax"/> 
  <input type="button" id="calculate" value="计算" onclick="calculate()"/>
  利息:<input type="text" id="interest" readonly="readonly"/>
 </body> 
</html>

这个小实例很简单,代码很好懂,但是代码背后的东西不是一般人能懂的。看懂的请举手.....

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
详解Document.Cookie
Dec 25 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
深入浅出分析javaScript中this用法
May 09 #Javascript
深入浅出理解javaScript原型链
May 09 #Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 #Javascript
JS动画效果打开、关闭层的实现方法
May 09 #Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 #Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 #Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 #Javascript
You might like
php addslashes和mysql_real_escape_string
2010/01/24 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
Node.js事件驱动
2015/06/18 Javascript
js格式化时间的方法
2015/12/18 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
使用Python编写Linux系统守护进程实例
2015/02/03 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
python内存管理机制原理详解
2019/08/12 Python
python中for in的用法详解
2020/04/17 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
Python request中文乱码问题解决方案
2020/09/17 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
数据库专业英语
2012/11/30 面试题
后进生转化工作制度
2014/01/17 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
2014年财务科工作总结
2014/11/11 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
django中websocket的具体使用
2022/01/22 Python
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python