jQuery实现的回车触发按钮事件功能示例


Posted in jQuery onMarch 25, 2018

本文实例讲述了jQuery实现的回车触发按钮事件功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
  <title>3water.com jQuery回车触发按钮事件</title>
  <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
  <script language="javascript" type="text/javascript">
    $(function () {
      $('#Submit').click(function () {
        var account = $('#AccountInput').val();
        var password = $('#PasswordInput').val();
        if (account == '') {
          alert('Please input account.');
          $('#AccountInput').focus();
          return false;
        }
        if (password == '') {
          alert('Please input password.');
          $('#PasswordInput').focus();
          return false;
        }
        if (account == 'chad' && password == '123456') {
          alert('Login success.');
        }
        else {
          alert('Login failed.');
        }
      });
      $(document).keydown(function (event) {
        if (event.keyCode == 13) {
          $('#Submit').triggerHandler('click');
        }
      });
    });
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <table>
      <tr>
        <td> account</td>
        <td><input id="AccountInput" type="text" style="width: 150px;" /></td>
      </tr>
      <tr>
        <td>password</td>
        <td><input id="PasswordInput" type="text" style="width: 150px;" /></td>
      </tr>
      <tr>
        <td><input id="Submit" type="button" value="submit"/></td>
      </tr>
    </table>
  </div>
  </form>
</body>
</html>

运行效果:

jQuery实现的回车触发按钮事件功能示例

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
jquery的 filter()方法使用教程
Mar 22 #jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
jQuery替换节点元素的操作方法
Mar 18 #jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
jQuery中each方法的使用详解
Mar 18 #jQuery
You might like
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
javascript每日必学之封装
2016/02/23 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
python学习之编写查询ip程序
2016/02/27 Python
Python数据结构与算法之字典树实现方法示例
2017/12/13 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
自荐信怎么写好
2013/11/11 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
大明湖导游词
2015/02/03 职场文书
环境建议书
2015/02/04 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
vue+iview实现手机号分段输入框
2022/03/25 Vue.js