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查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
node.js操作mysql简单实例
May 25 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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 cURL和Rolling cURL并发方式比较
2013/10/30 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
对python中dict和json的区别详解
2018/12/18 Python
python操作excel让工作自动化
2019/08/09 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
生日宴会答谢词
2014/01/09 职场文书
运动会表扬稿大全
2014/01/16 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
临床专业自荐信
2014/06/22 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏