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 相关文章推荐
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
详解Angular 4.x NgTemplateOutlet
May 24 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 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+Ajax简单get验证操作示例
2019/03/02 PHP
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
浅谈React组件之性能优化
2018/03/02 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
Python程序语言快速上手教程
2012/07/18 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
2014年单位工作总结范文
2014/11/27 职场文书
男方婚礼答谢词
2015/01/20 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS