Easyui下的点击回车键跳转到下个控件

在Easyui框架下，JavaScript 中的 onKeyDown事件居然失效了。所以使用了另外的函数去实现点击回车键跳转到下个控件。

 1 /**
 2  * 点击回车键跳转到下个控件;
 3  * @param oldId 被点击的textbox
 4  * @param newId 下个要选中的控件ID
 5  */
 6 function keydownText(oldId,newId){
 7     var col=document.getElementById(oldId);
 8     if(col.className=='easyui-combobox'){
 9         $('#'+oldId).combobox({
10             inputEvents: $.extend({}, $.fn.combobox.defaults.inputEvents, {
11                 keydown: function (e) {
12                     if (e.keyCode == 13) {
13                         $('#'+oldId).combobox('hidePanel');
14                         $('#'+newId).textbox('textbox').focus();
15                     }
16                     else if (e.keyCode == 40) {
17                         $('#'+oldId).combobox('showPanel');
18                     }
19                 }
20             })
21         });
22     }
23     else if(col.className=='easyui-numberbox'){
24         $('#'+oldId).numberbox({
25             inputEvents: $.extend({}, $.fn.numberbox.defaults.inputEvents, {
26                 keydown: function (e) {
27                     if (e.keyCode == 13) {
28                         $('#'+newId).textbox('textbox').focus();
29                     }
30                 }
31             })
32         });
33     }
34     else {//if(col.className=='easyui-textbox')
35         $('#'+oldId).textbox({
36             inputEvents: $.extend({}, $.fn.textbox.defaults.inputEvents, {
37                 keydown: function (e) {
38                     if (e.keyCode == 13) {
39                         $('#'+newId).textbox('textbox').focus();
40                     }
41                 }
42             })
43         });
44     }
45 }
keydownText函数

2.前台页面

 1 <tr>
 2     <td class="pe-label">学历：</td>
 3     <td class="pe-content">
 4         <input id="baseinfo_base19" name="baseinfo_base19" class="easyui-combobox">
 5     </td>
 6     <td class="pe-label">目前职业：</td>
 7     <td class="pe-content">
 8         <input id="baseinfo_base20" name="baseinfo_base20" class="easyui-combobox">
 9     </td>
10     <td class="pe-label">工作单位：</td>
11     <td class="pe-content">
12         <input id="baseinfo_base21" name="baseinfo_base21" class="easyui-textbox">
13     </td>
14 </tr>
html代码

 

3.在JS页面中的引用

1 $(function(){
2 keydownText('baseinfo_base19','baseinfo_base20');
3 keydownText('baseinfo_base20','baseinfo_base21');
4 });
实现功能

 

不过这个函数在对combox的回车键跳转时，存在一点问题，有待解决中。

posted @ 2018-07-12 10:20  库拉丽秋  阅读(325)  评论(0)  编辑  收藏  举报