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操作Cookies包括(读取添加与删除)
Dec 26 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
python实现的udp协议Server和Client代码实例
2014/06/04 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
python写入文件自动换行问题的方法
2019/07/05 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
大学生四年生活自我鉴定
2013/11/21 职场文书
民主生活会发言材料
2014/10/20 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript