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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
虫族 ZERG 概述
2020/03/14 星际争霸
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php实现小程序支付完整版
2018/10/09 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
Python中的下划线详解
2015/06/24 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
区分python中的进程与线程
2020/08/13 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
电子商务专业毕业生工作推荐信
2013/11/17 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
三好学生竞选稿
2015/11/21 职场文书