Ext实现页面表单Enter全键盘导航

 在web软件中，很多时候我们希望提供用户一个键盘表单导航的功能，使用Enter代替tab实现表单的导航。
思路基本就是遍历页面的input字段，为每个表单项增加一个enter键的监听，如果出发了enter键则程序在触发tab键即可。

下面是在ext中实现的键盘导航的代码。

 

1. **
2. * 表单全键盘导航功能
3. * index:可选参数，用于设定页面加载完成后默认获取焦点的表单项，支持索引号和id/dom类型参数传入。
4. */
5. var keyNav = function(index){
6.     var run=function(){
7.         var all=Ext.DomQuery.select('input[type!=hidden]'); //查找所有非隐藏的录入向（ext中select都是用input模拟的所以这里不用找select）
8.         Ext.each(all,function(o,i,all){ //遍历并添加enter的监听
9.             Ext.get(o).addKeyMap({
10.                 key : 13,
11.                 fn : function() {
12.                     try{all[i+1].focus()}catch(e){event.keyCode=9}
13.                     if(all[i+1]&&/button|reset|submit/.test(all[i+1].type)) all[i+1].click();   //如果是按钮则触发click事件
14.                     return true;
15.                 }
16.             })
17.         });
18.         document.body.focus();  //使页面获取焦点，否则下面设定默认焦点的功能有时不灵验
19.         try{
20.             var el;
21.             if(typeof eval(xFocus)=='object'){  //如果传入的是id或dom节点
22.                 el=Ext.getDom(xFocus).tagName=='input'?Ext.getDom(xFocus):Ext.get(xFocus).first('input',true);  //找到input框
23.             }else{
24.                 el=all[xFocus||0];  //通过索引号找
25.             }
26.             el.focus();
27.         }catch(e){} 
28.     }
29.     Ext.isReady?run():Ext.onReady(run);  //页面加载完成后添加表单导航
30. }