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 短路法代码精简
Aug 20 Javascript
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 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
信用卡效验程序
2006/10/09 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
降低PHP Redis内存占用
2017/03/23 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
拖拉表格的JS函数
2008/11/20 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
深入Python解释器理解Python中的字节码
2015/04/01 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
金智子午JAVA面试题
2015/09/04 面试题
2014年统战工作总结
2014/12/09 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
高一作文之暖冬
2019/11/09 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers