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 23 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
vue瀑布流组件实现上拉加载更多
Mar 10 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 array_merge下进行数组合并的代码
2008/07/22 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
javscript对象原型的一些看法
2010/09/19 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
Python算法应用实战之队列详解
2017/02/04 Python
Python使用xlwt模块操作Excel的方法详解
2018/03/27 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
python实现AdaBoost算法的示例
2020/10/03 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
农村婚礼主持词
2014/03/13 职场文书
校庆口号
2014/06/20 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python