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 面试题随笔
Mar 31 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
js实现旋转木马效果
Mar 17 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
vue登录注册实例详解
Sep 14 Javascript
原生JS运动实现轮播图
Jan 02 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
javascript window对象属性整理
2009/10/24 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python super函数使用方法详解
2020/02/14 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
暑期实习鉴定
2013/12/16 职场文书
办公室助理岗位职责
2013/12/25 职场文书
前台接待员岗位职责
2014/01/02 职场文书
教师工作能力自我评价
2015/03/04 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书