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中定义对象类别
Dec 22 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
Vue.js实现备忘录功能
Jun 26 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
vue随机验证码组件的封装实现
Feb 19 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
JavaScript 生成唯一ID的几种方式
Feb 19 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和MySql来与ODBC数据连接
2006/10/09 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
php恢复数组的key为数字序列的方法
2015/04/28 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
php中序列化与反序列化详解
2017/02/13 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
Python @property使用方法解析
2019/09/17 Python
Python生成六万个随机,唯一的8位数字和数字组成的随机字符串实例
2020/03/03 Python
python3 简单实现组合设计模式
2020/07/02 Python
泰国网上购物:Shopee泰国
2018/09/14 全球购物
"序列点" 是什么
2016/07/29 面试题
大四学年自我鉴定
2013/11/13 职场文书
信访工作经验交流材料
2014/05/23 职场文书
施工安全责任书范本
2014/07/24 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
四年级数学上册教学计划
2015/01/20 职场文书
信息技术国培研修日志
2015/11/13 职场文书
委托书范本格式
2019/04/18 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python