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实现全选、反选和不选功能
Aug 16 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
Jquery异步上传文件代码实例
Nov 13 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
提问的智慧(2)
2006/10/09 PHP
php实现aes加密类分享
2014/02/16 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
js调用css属性写法
2013/09/21 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
3种python调用其他脚本的方法
2020/01/06 Python
jupyter实现重新加载模块
2020/04/16 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
C#面试题
2016/05/06 面试题
应届生自荐信范文
2014/02/21 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书