jQuery实现的回车触发按钮事件功能示例

本文实例讲述了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>www.jb51.net 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>

运行效果：

PS：关于javascript事件说明可参考本站javascript事件与功能说明大全：http://tools.jb51.net/table/javascript_event

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery移除、绑定、触发元素事件使用示例详解

    复制代码 代码如下: unbind(type [,data])     //data是要移除的函数$('#btn').unbind("click"); //移除click$('#btn').unbind(); //移除所有 对于只需要触发一次的,随后就要立即解除绑定的情况,用one() 复制代码 代码如下: $('#btn').one("click",function(){.......}); 触发操作trigger() 方法触发被选元素的指定事件类型. 复制代码

  • jQuery事件的绑定、触发、及监听方法简单说明

    如果你在写文章或者 Demo,为了简单,你当然可以用事件监听函数,以及那些事件对象提供的方法等.但在实际中,有一些方法和属性是有兼容性问题的,所以我们会使用 jQuery 来消除兼容性问题. 下面简单的来说一下 jQuery 中事件的基础操作. 绑定事件和事件代理 在 jQuery 中,提供了诸如 click() 这样的语法糖来绑定对应事件,但是这里推荐统一使用 on() 来绑定事件.语法: .on( events [, selector ] [, data ], handler ) event

  • Jquery 监视按键，按下回车键触发某方法的实现代码

    Jquery 监视按键，按下回车键触发某方法的实现代码

    复制代码 代码如下: <script type="text/javascript">$(function () { $('input:text:first').focus(); //把焦点放在第一个文本框 var $inp = $('input'); //所有的input元素$inp.keypress(function (e) { //这里给function一个事件参数命名为e,叫event也行,随意的,e就是IE窗口发生的事件.    var key = e.which;

  • JQuery自动触发事件的方法

    本文实例讲述了JQuery自动触发事件的方法.分享给大家供大家参考.具体如下: 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操作.例如可以使用下面的代码来触发id为btn的按钮的click事件. $('#btn').trigger("click"); 这样,当页面加载完毕后,就会立刻输出想要的效果.也可以直接简写click(),来达到同样的效果:

  • jquery如何扑捉回车键触发的事件

    1.jquery捕捉回车键: 复制代码 代码如下: $("html").die().live("keydown",function(event){ if(event.keyCode==13){ //这里添加要处理的逻辑 } }); //绑定回车动作 $('textarea[name=chattext]').keydown(function(event){ if(event.which==13){ } }); 2.jquery获得多个选中的checkbox值: 复制代

  • jquery实现input输入框实时输入触发事件代码

    jquery实现input输入框实时输入触发事件代码

    复制代码 代码如下: <input id="productName" name="productName" class="wid10" type="text" value="" /> 复制代码 代码如下: //绑定商品名称联想 $('#productName').bind('input propertychange', function() {searchProductClassbyName()

  • JQuery文本改变触发事件如聚焦事件、失焦事件

    Juery中聚焦事件: 复制代码 代码如下: $("#id").focus(function(){ }); 失焦事件: 复制代码 代码如下: $("#id").blur(function(){ }); 但是文本改变事件却不能这样写: 复制代码 代码如下: $("#id").change(function(){ }); 文本改变事件可以这样写,propertychange是属性改变时触发事件 复制代码 代码如下: $("#id"

  • jquery实现回车键触发事件(实例讲解)

    键盘事件有3: keydown,keypress,keyup,分别是按下,按着没上抬,上抬键盘 . 正确代码为: $(document).keyup(function(event){ if(event.keyCode ==13){ $("#submit").trigger("click"); } }); 推荐:keyup,防止笔记本键盘不小心触摸到了 1.有些文档中有写成这样: $(window).keydown(function(){ ... }) XP系统IE6

  • jquery 绑定回车动作扑捉回车键触发的事件

    1.jquery捕捉回车键: 复制代码 代码如下: $("html").die().live("keydown",function(event){ if(event.keyCode==13){ //这里添加要处理的逻辑 } }); //绑定回车动作 $('textarea[name=chattext]').keydown(function(event){ if(event.which==13){ } }); 2.jquery获得多个选中的checkbox值: 复制代

  • jquery禁止回车触发表单提交

    复制代码 代码如下: <form class="form-inline definewidth m20" action="/" method="get">              <input type="text" name="title" id="title"class="abc" value="">         

  • jQuery实现长按按钮触发事件的方法

    jQuery实现长按按钮触发事件的方法

    本文实例讲述了jQuery实现长按按钮触发事件的方法.分享给大家供大家参考.具体分析如下: 现在手机端的快速发展,使许多手机手势需要制作到手机版的网页过程中 网上有许多长按按钮的插件,甚至仅仅是jQuery Mobile都有长按事件 但是基于种种的兼容性问题, 只使用jquery去实现长按动作,可以在手机端与电脑端保持极强的兼容性 一.基本目标 制作一个按钮,实质上一个100x100px的灰色背景的图层,长按达2s则图层里的文字从in变成out.如下图所示: 二.制作过程 代码如下: 复制代码

随机推荐