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下用eval生成JSON对象
Sep 17 Javascript
jQuery DOM插入节点操作指南
Mar 03 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php获得文件大小和文件创建时间的方法
2015/03/13 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
javascript 获取图片颜色
2009/04/05 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
JavaScript中的立即执行函数表达式介绍
2015/03/15 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
在Python web中实现验证码图片代码分享
2017/11/09 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python的依赖管理的实现
2019/05/14 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
工程招投标邀请书
2014/01/30 职场文书
新闻发布会主持词
2014/03/28 职场文书
花坛标语大全
2014/06/30 职场文书
股份合作协议书
2014/09/10 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
浅析python中特殊文件和特殊函数
2022/02/24 Python
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android