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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jquery向后台提交数组的代码分析
Feb 20 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
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
教大家制作简单的php日历
2015/11/17 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
javascript函数中的arguments参数
2010/08/01 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
Sea.JS知识总结
2016/05/05 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
详解Vue之事件处理
2020/07/10 Javascript
详解Python中的变量及其命名和打印
2016/03/11 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
tensorflow2.0的函数签名与图结构(推荐)
2020/04/28 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
美国饼干礼物和美食甜点购买网站:Cheryl’s
2020/05/28 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
新任教师自我鉴定
2014/02/24 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
萤火虫之墓观后感
2015/06/05 职场文书