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实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python 专题三 字符串的基础知识
2017/03/19 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python创建文件备份的脚本
2018/09/11 Python
python多线程分块读取文件
2019/08/29 Python
学习Python爬虫的几点建议
2020/08/05 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
Java模拟试题
2014/11/10 面试题
幼师专业求职推荐信
2013/11/08 职场文书
前处理组长岗位职责
2014/03/01 职场文书
会计人员岗位职责
2014/03/19 职场文书
义和团口号
2014/06/17 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
李白故里导游词
2015/02/12 职场文书
工地材料员岗位职责
2015/04/11 职场文书
匿名信格式范文
2015/05/27 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
Django操作cookie的实现
2021/05/26 Python
MySQL开启事务的方式
2021/06/26 MySQL
Python如何用re模块实现简易tokenizer
2022/05/02 Python