zoukankan      html  css  js  c++  java
  • jquery模拟按下回车实现代码

    简单地记下jquery实现回车事件,代码如下:
    全局:

    代码如下:
    $(function(){
    document.onkeydown = function(e){
    var ev = document.all ? window.event : e;
    if(ev.keyCode==13) {
    $('#FormId).submit();//处理事件
    }
    }
    }); 


    某个控件:

    代码如下:

    $('#id').keydown(function(e){
    if(e.keyCode==13){
    $('#FormId).submit(); //处理事件
    }
    });
    if (window.event.keyCode==13) window.event.keyCode=0   //这样就取消回车键了 


    如果想模拟Tab键,只要写成  if (window.event.keyCode==13) window.event.keyCode=9 就行了,它会跳到另一个元素上。

    众所周知easyui 的Pagination中要想跳转到某一页,只需要输入页码按ENTER就能达到效果。前段时间的项目 客户提出要求说想要输入页码 按一个GO的按钮做跳转。好吧,客户是上帝,他们怎么说我们这些程序猿只能尽自己所能来达到效果。如图:

    即:按下GO做 输入3按回车一样的事情

    而这个问题可以简化为 点击一个a标签 模拟Pagination页码输入框按下回车 但是这个事件是写在jquery.easyui.min.js中,我们没有办法直接调用;通过chrome查询到页码输入框是

    代码如下:

    <input class="pagination-num" type="text" value="1" size="2"> 


    而后查看了JQUERY API 的 Event Object发现 jquery有个trigger方法能够触发模拟的按键事件。直接上代码

    代码如下:

    <script language="javascript" type="text/javascript">
    $(document).ready(function () {
    $("#test").datagrid({
    url: "/Test/Test1Data",
    type: "post",
    datatype: "json",
     465,
    height: 280,
    loadMsg: "数据加载中,请稍后...",
    fitCloumns: true,
    nowrap: true,
    rownumbers: false,
    pagination: true,
    singleSelect: true,
    showFooter: true,
    columns: [[
    { field: 'testName', title: '测试名', 230, editor: 'text'},
    {field:'testValue',title:'测试值',230,align: 'center' }
    ]]
    });
    $("#test").datagrid('getPager').pagination({
    showPageList: false,
    showRefresh: false,
    beforePageText: "第",
    afterPageText: "页 <a href='javascript:void(0)' onclick='GoEnterPage()'><img src='/upload/201109/20110920220555970.gif'></a>,共{pages}页",
    displayMsg: '当前{from}到{to}条,总共{total}条'
    });
    }); //上面代码参数可以参看easyui的文档
    function GoEnterPage() {
    var e = jQuery.Event("keydown");//模拟一个键盘事件
    e.keyCode = 13;//keyCode=13是回车
    $("input.pagination-num").trigger(e);//模拟页码框按下回车
    }
    </script> 


    easyui官网:http://www.jeasyui.com/index.php
    jquery:http://jquery.com/
    这里有个jquery的中文手册,说明很全:http://jquery.org.cn/manual/

  • 相关阅读:
    系统的讲解
    系统的讲解
    前端笔记之Vue(七)Vue-router&axios&Vue插件&Mock.js&cookie|session&加密
    前端笔记之Vue(六)分页排序|酷表单实战&Vue-cli
    前端笔记之Vue(五)TodoList实战&拆分store&跨域&练习代理跨域
    EggJs快速入门
    前端笔记之Vue(四)UI组件库&Vuex&虚拟服务器初识
    前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令
    前端笔记之Vue(二)组件&案例&props&计算属性
    前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令
  • 原文地址:https://www.cnblogs.com/longyi/p/3150548.html
Copyright © 2011-2022 走看看