jquery模拟按下回车实现代码
更新时间：2011年09月20日 22:06:00 作者：
今天要实现一个回车事件，一开始用了 js 的方法，怎么都不行，原来JQuery有点不同于JS的，而且比起JS简单多了
简单地记下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的按钮做跳转。好吧，客户是上帝，他们怎么说我们这些程序猿只能尽自己所能来达到效果。如图：
<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/
全局：
复制代码 代码如下:
$(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的按钮做跳转。好吧，客户是上帝，他们怎么说我们这些程序猿只能尽自己所能来达到效果。如图：
即：按下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/
相关文章
本篇文章主要介绍了jQuery导航条固定定位效果实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了jQuery对table表格进行增删改查操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
jquery对象的相应方法DOM对象不能使用，而DOM对象的相应方法jquery也不能使用。所以在具体项目中要注意Jquery对象与DOM对象的转换问题2009-04-04
我们往往是将同一级目录下的栏目先隐藏起来，当用户的鼠标滑过时则显示出来。这就是用javascript实现的一个导航栏下拉列表，下面为大家讲解下是如何实现的2013-09-09
这篇文章主要介绍了jQuery实现数字自动增加或者减少的动画效果,涉及jQuery结合时间函数动态设置元素属性相关操作技巧,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了jQuery中addClass()方法用法,实例分析了addClass()方法的功能、定义及向匹配元素添加一个或多个类的使用技巧,需要的朋友可以参考下2015-01-01
jquery实现文本框鼠标右击无效以及不能输入的实现方法，需要的朋友可以参考下。2010-11-11
这篇文章介绍了jQuery中的CSS-DOM操作，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了jQuery的ajax下载blob文件的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
本文给大家总结了10款本站今年比较热门的html5/css3的动画特效，附上演示地址和下载地址，有需要的小伙伴对比着使用。2014-12-12
最新评论