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表单设置值的方法
Jun 30 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
基于jquery实现五星好评
Nov 18 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jquery实现点击左右按钮切换图片
Jan 27 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
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
初识laravel5
2015/03/02 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
python执行子进程实现进程间通信的方法
2015/06/02 Python
Python的Django框架安装全攻略
2015/07/15 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
python处理“
2019/06/10 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Python自带的IDE在哪里
2020/07/01 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
北承题目(C++)
2012/05/16 面试题
Solaris操作系统的线程机制
2012/12/23 面试题
怎样写留学自荐信
2013/11/11 职场文书
个人承诺书格式
2014/06/03 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
骨干教师考核评语
2014/12/31 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS