在web软件中,很多时候我们希望提供用户一个键盘表单导航的功能,使用Enter代替tab实现表单的导航。
思路基本就是遍历页面的input字段,为每个表单项增加一个enter键的监听,如果出发了enter键则程序在触发tab键即可。
下面是在ext中实现的键盘导航的代码。
/** * 表单全键盘导航功能 * index:可选参数,用于设定页面加载完成后默认获取焦点的表单项,支持索引号和id/dom类型参数传入。 */ var keyNav = function(index){ var run=function(){ var all=Ext.DomQuery.select('input[type!=hidden]'); //查找所有非隐藏的录入向(ext中select都是用input模拟的所以这里不用找select) Ext.each(all,function(o,i,all){ //遍历并添加enter的监听 Ext.get(o).addKeyMap({ key : 13, fn : function() { try{all[i+1].focus()}catch(e){event.keyCode=9} if(all[i+1]&&/button|reset|submit/.test(all[i+1].type)) all[i+1].click(); //如果是按钮则触发click事件 return true; } }) }); document.body.focus(); //使页面获取焦点,否则下面设定默认焦点的功能有时不灵验 try{ var el; if(typeof eval(xFocus)=='object'){ //如果传入的是id或dom节点 el=Ext.getDom(xFocus).tagName=='input'?Ext.getDom(xFocus):Ext.get(xFocus).first('input',true); //找到input框 }else{ el=all[xFocus||0]; //通过索引号找 } el.focus(); }catch(e){} } Ext.isReady?run():Ext.onReady(run); //页面加载完成后添加表单导航 } |
分享到:
相关推荐
实现页面grid页面全动态,希望对您有帮助,请帮顶!
EXT 表单验证EXT 表单验证EXT 表单验证EXT 表单验证EXT 表单验证
ext ext表单 ext表单设计器 表单设计
Ext.net Enter实现Tab功能
使用 json 动态加载 Ext 表单数据。
EXT异步提交FORM表单的使用和,以及EXT配合struts2,sprint2.5进行前台和后台的交互解释和运用.....
Ext实现的前台论坛开发,实现了版主、发帖、回帖、注册等常用功能。
JSP+Ext实现CURD
ext js 页面自动刷新教程集合 ext js 页面自动刷新教程集合
ext_表单提交_数据校验 ext_表单提交_数据校验
EXT提交表单,ASP EXT提交表单,ASP EXT提交表单,ASP EXT提交表单,ASP EXT提交表单,ASP EXT提交表单,ASP
ext实现动态
Ext实现的拖拽树的测试例子,里面有不少页面,其中我的测试下的Default.aspx可以运行
自己用Ext2.0做的Form表单,是个包。里面有最后生成界面的图片
EXT dojochina ExtAjax表单提交 L9.rar EXT dojochina ExtAjax表单提交 L9.rar
ext技术各页面设计源代码:ext技术各页面设计源代码;ext技术各种页面设计源代码
EXT 如何画出页面,主要是js.如果还需要其它,我会整理后上传
Ext教程 展示EXT表单FormPanel和表格GridPanel的使用
Ext 添加功能form表单实例 适合Ext初学者
1. Ext.form.NumberField 2. Ext.form.TextArea 3. Ext.form.TriggerField 4. Ext.form.DateField 5. Ext.form.ComboBox 6. Ext.form.TimeField