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 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
使用js实现数据格式化
Dec 03 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
JS常见算法详解
Feb 28 Javascript
vue构建单页面应用实战
Apr 10 Javascript
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
JS实现带动画的回到顶部效果
Dec 28 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
JS实现星星海特效
Dec 24 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 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编程开发“虚拟域名”系统
2006/10/09 PHP
谈谈PHP语法(4)
2006/10/09 PHP
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
Vuex实现数据共享的方法
2019/12/20 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
理解Python中函数的参数
2015/04/27 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
Python os.access()用法实例
2019/02/18 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
tensorflow 查看梯度方式
2020/02/04 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
python3 re返回形式总结
2020/11/20 Python
加拿大廉价机票预订网站:CheapOair.ca
2018/03/04 全球购物
浙大毕业生自荐信
2014/01/26 职场文书
小学生评语集锦
2014/04/18 职场文书
优秀家长自荐材料
2014/08/26 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL