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 相关文章推荐
js获取height和width的方法说明
Jan 06 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
浅析JavaScript动画
Jun 10 Javascript
JavaScript中string对象
Jun 12 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
php错误级别的设置方法
2013/06/17 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
彻底理解Python list切片原理
2017/10/27 Python
解读python logging模块的使用方法
2018/04/17 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
Python3中exp()函数用法分析
2019/02/19 Python
详解【python】str与json类型转换
2019/04/29 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
给交警的表扬信
2014/01/12 职场文书
七年级英语教学反思
2014/01/15 职场文书
作弊检讨书1000字
2014/02/01 职场文书
经理助理岗位职责
2014/03/05 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
春节随笔
2015/08/15 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS