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 封装 Ajax 常用方法(推荐)
May 21 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery each和js forEach用法比较
Feb 27 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
PHP输出日历表代码实例
2015/03/27 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python中JWT用户认证的实现
2020/05/18 Python
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
在职员工证明书
2014/09/19 职场文书
学习保证书
2015/01/17 职场文书
公司欠款证明
2015/06/24 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android