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 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
jQuery事件对象总结
Oct 17 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
Jquery Fade用法详解
Nov 06 jQuery
JavaScript实现网页tab栏效果制作
Nov 20 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判断并删除空目录及空子目录的方法
2015/02/11 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
validator验证控件使用代码
2010/11/23 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
jQuery中:selected选择器用法实例
2015/01/04 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
python实现2014火车票查询代码分享
2014/01/10 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
个人欠款担保书
2014/05/20 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
调解协议书范本
2016/03/21 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS