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 相关文章推荐
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
js实现盒子滚动动画效果
Aug 09 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
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python 专题四 文件基础知识
2017/03/20 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python按比例随机切分数据的实现
2019/07/11 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
俄语专业毕业生推荐信
2013/10/28 职场文书
小学新教师培训方案
2014/02/03 职场文书
《可爱的动物》教学反思
2014/02/22 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
社团个人总结范文
2015/03/05 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
同学会演讲稿
2019/04/02 职场文书