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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
利用python分析access日志的方法
Oct 26 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
javascript实现时钟动画
Dec 03 Javascript
详解CocosCreator消息分发机制
Apr 16 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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/11/27 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
angularjs客户端实现压缩图片文件并上传实例
2015/07/06 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
python读写csv文件实例代码
2019/07/05 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
HTML5 Blob 实现文件下载功能的示例代码
2019/11/29 HTML / CSS
幼儿园庆六一活动方案
2014/03/06 职场文书
银行安全保卫工作总结
2015/08/10 职场文书