A JavaScript Fancier

伟大的javascript技术研究中...

  IT博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks


在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);  //页面加载完成后添加表单导航
}

posted on 2008-07-10 10:17 Yemoo'S JS Blog 阅读(4751) 评论(3)  编辑 收藏 引用 所属分类: Js框架组件

评论

# re: Ext实现页面表单Enter全键盘导航[未登录] 2008-07-22 00:39 Frank
click()方法是通用的?  回复  更多评论
  

# re: Ext实现页面表单Enter全键盘导航 2011-09-21 01:28 Schreber
不支持firefox呀 event.keyCode只读属性,不好赋值  回复  更多评论
  

只有注册用户登录后才能发表评论。