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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 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中如何调用用户自定义函数
2013/08/06 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
Python wordcloud库安装方法总结
2020/12/31 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
应届毕业生求职自荐书
2014/01/03 职场文书
学年自我鉴定
2014/01/16 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
个人整改方案范文
2014/10/25 职场文书
高一作文之暖冬
2019/11/09 职场文书
KVM基础命令详解
2022/04/30 Servers
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技