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获取input的value问题说明
Aug 19 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 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
VFP与其他应用程序的集成
2006/10/09 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
PHP计算数组中值的和与乘积的方法(array_sum与array_product函数)
2016/04/01 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
JQuery动画和停止动画实例代码
2013/03/01 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python使用socket向客户端发送数据的方法
2015/04/29 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python发送邮件脚本
2018/05/22 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
估算杭州有多少软件工程师
2015/08/11 面试题
上海期货面试题
2014/01/31 面试题
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
物业管理应届生求职信
2013/10/28 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
婚前财产公证书
2014/04/10 职场文书
支部组织生活会方案
2014/06/10 职场文书
授权委托书格式
2014/07/31 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
未婚证明范本
2015/06/15 职场文书
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS