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生成的动态下雨背景效果实现方法
Feb 25 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
详解angular element()方法使用
Apr 08 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 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
基于mysql的bbs设计(四)
2006/10/09 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python3访问并下载网页内容的方法
2015/07/28 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
C语言笔试题
2014/09/04 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
夜大毕业生自我评价分享
2013/11/10 职场文书
护士长竞聘书
2014/03/31 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
社区党员公开承诺书
2014/08/30 职场文书
二婚主持词
2015/06/30 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技