zoukankan      html  css  js  c++  java
  • 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的回车键跳转时,存在一点问题,有待解决中。

  • 相关阅读:
    抽象工厂模式
    工厂方法模式
    简单工厂模式
    多例模式
    深入分析 Java 中的中文编码问题
    PipedInputStream和PipedOutputStream详解
    单例模式
    Java IO和NIO文章目录
    wsdlLocation可以写成项目的相对路劲吗
    ssh框架配置事务管理器
  • 原文地址:https://www.cnblogs.com/KLLQBKY/p/9298126.html
Copyright © 2011-2022 走看看