jquery模拟按下回车实现代码


Posted in Javascript onSeptember 20, 2011

简单地记下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的按钮做跳转。好吧,客户是上帝,他们怎么说我们这些程序猿只能尽自己所能来达到效果。如图:

                                jquery模拟按下回车实现代码

即:按下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", 
width: 465, 
height: 280, 
loadMsg: "数据加载中,请稍后...", 
fitCloumns: true, 
nowrap: true, 
rownumbers: false, 
pagination: true, 
singleSelect: true, 
showFooter: true, 
columns: [[ 
{ field: 'testName', title: '测试名', width:230, editor: 'text'}, 
{field:'testValue',title:'测试值',width: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/
Javascript 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
Bootstrap每天必学之响应式导航、轮播图
Apr 25 Javascript
angular十大常见问题
Mar 07 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 #Javascript
50个比较实用jQuery代码段
Sep 18 #Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 #Javascript
Jquery 表格合并的问题分享
Sep 17 #Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 #Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 #Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 #Javascript
You might like
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
Python实现简单状态框架的方法
2015/03/19 Python
Python操作MongoDB详解及实例
2017/05/18 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Python os.access()用法实例
2019/02/18 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python如何定义有可选参数的元类
2020/07/31 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
管道维修工岗位职责
2013/12/27 职场文书
结婚典礼证婚词
2014/01/08 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
李敖北大演讲稿
2014/05/24 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS