Ext实现页面表单Enter全键盘导航
|
| 作者： 发布时间：2008-09-02 10:32:53 |
|
在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.each(all,function(o,i,all){
- 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();
- return true;
- }
- })
- });
- document.body.focus();
- try{
- var el;
- if(typeof eval(xFocus)=='object'){
- el=Ext.getDom(xFocus).tagName=='input'?Ext.getDom(xFocus):Ext.get(xFocus).first('input',true);
- }else{
- el=all[xFocus||0];
- }
- el.focus();
- }catch(e){}
- }
- Ext.isReady?run():Ext.onReady(run);
- }
|
|
| |
|
