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 相关文章推荐
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
Dec 12 Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
微信小程序保持session会话的方法
Mar 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
咖啡的种类和口感
2021/03/03 新手入门
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
js滚动条回到顶部的代码
2011/12/06 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
基于python实现微信模板消息
2015/12/21 Python
python实现用户答题功能
2018/01/17 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
医学检验专业大学生求职信
2013/11/18 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
体育课外活动总结
2014/07/08 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
2015年校长新年寄语
2014/12/08 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书