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 相关文章推荐
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
屏蔽script注入小例子
Nov 12 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
jquery easyui中treegrid用法的简单实例
Feb 18 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
vue实现验证码输入框组件
Dec 14 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
微信小程序纯文本实现@功能
Apr 08 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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入门学习的几个不错的实例代码
2008/07/13 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
jQuery Validate表单验证入门学习
2015/12/18 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
vue-router权限控制(简单方式)
2018/10/29 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python发送邮件功能实现代码
2016/07/15 Python
python实现图片处理和特征提取详解
2017/11/13 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
python getpass模块用法及实例详解
2019/10/07 Python
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
俄语专业职业生涯规划
2014/02/26 职场文书
班委竞选演讲稿
2014/04/28 职场文书
市场营销策划方案
2014/06/11 职场文书
展览会邀请函
2015/02/02 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
会计专业求职信范文
2015/03/19 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
学困生转化工作总结
2015/08/13 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
springcloud整合seata
2022/05/20 Java/Android