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 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
Vue实现简易计算器
Feb 25 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
如何把PHP转成EXE文件
2006/10/09 PHP
php连接mysql数据库代码
2009/03/10 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
php中使用url传递数组的方法
2015/02/11 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
Vue监听数组变化源码解析
2017/03/09 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
Flask框架信号用法实例分析
2018/07/24 Python
python实现Dijkstra静态寻路算法
2019/01/17 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
土木建筑学生自我评价
2014/01/14 职场文书
元旦晚会感言
2014/03/12 职场文书
语文课外活动总结
2014/08/27 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
课外活动总结
2015/02/04 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫