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中简单的实现像C#中using功能(有源码下载)
Jan 09 Javascript
js 处理URL实用技巧
Nov 23 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
详解webpack 多入口配置
Jun 16 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
php源码的安装方法和实例
2019/09/26 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
领导调研接待方案
2014/02/27 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
抗震救灾标语
2014/06/26 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2015年质检工作总结
2015/05/04 职场文书
Python进度条的使用
2021/05/17 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
python之django路由和视图案例教程
2021/07/26 Python
利用js实现简单开关灯代码
2021/11/23 Javascript