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 29 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现轮播图效果demo
Jan 11 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对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php实现的通用图片处理类
2015/03/24 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
js 替换
2008/02/19 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
koa-router源码学习小结
2018/09/07 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
python转换摩斯密码示例
2014/02/16 Python
python学习数据结构实例代码
2015/05/11 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
基于python log取对数详解
2018/06/08 Python
Django中使用Celery的方法示例
2018/11/29 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
生日派对邀请函
2014/01/13 职场文书
化妆品活动策划方案
2014/05/23 职场文书
2015年库房工作总结
2015/04/30 职场文书
迎国庆主题班会
2015/08/17 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
详解Python中下划线的5种含义
2021/07/15 Python
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server