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编程起步(第四课)
Jan 10 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
JavaScript实现开关等效果
Sep 08 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
利用php输出不同的心形图案
2016/04/22 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
python3简单实现微信爬虫
2015/04/09 Python
用Python创建声明性迷你语言的教程
2015/04/13 Python
Python continue继续循环用法总结
2018/06/10 Python
python判断设备是否联网的方法
2018/06/29 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
python一些性能分析的技巧
2020/08/30 Python
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
公司活动邀请函
2014/01/24 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
小学生优秀评语大全
2014/04/22 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
优秀纪检干部材料
2014/08/27 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
iPhone13再次曝光
2021/04/15 数码科技
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS