zoukankan      html  css  js  c++  java
  • 解决input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能

     最近做项目遇到:

    背景:点击单元格,easyUI自动生成input可编辑框。

    问题点:input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能

    要实现需求:

    1、回车键保存编辑内容

    2、input框失去焦点后,不保存编辑内容,还原为原来内容。

     如下图所示:

    编程中遇到的棘手问题:

      按下回车后,保存不了编辑的内容。原因是按下回车,先触发input框的blur事件(此时导致编辑内容被还原,保存不了内容),才触发回车事件。

    经过多方尝试,摸索出一下解决办法,终于解决回车和blur冲突的问题,具体代码如下:

    var inputEditor = $("input.datagrid-editable-input");//單元格input元素
    
            //input生成后,自動獲取聚焦
            inputEditor.focus();
    
            //input失去焦點,撤銷編輯操作,恢復原來的值,不保存
            inputEditor.bind("blur",function(evt){
                reject();
            });
    
            //按鍵按下,如果是回車鍵,則保存編輯內容
            inputEditor.bind("keypress",function(evt){
                var keyCode = evt.keyCode;
                if(keyCode == 13){  //回车事件
    //                alert(evt.keyCode);
                    $(this).unbind("blur");
                    accept();
    
                }
            });
    
            /*
            * input獲取焦點后,綁定blur事件
            * 在input已獲取焦點的前提下,點擊文檔任何位置,取消編輯內容
            * 如果是回車鍵按下,則取消綁定blur,保存編輯內容
            * */
    
            inputEditor.bind("focus",function(evt){
    
                $(this).bind("blur",function(evt){
                    reject();
                });
    
                $(document).bind("click",function(){
                    reject();
                });
    
                $(this).bind("keypress",function(){
                    var keyCode = evt.keyCode;
                    if(keyCode == 13){  //回车事件
    //                alert(evt.keyCode);
                        $(this).unbind("blur");
                        accept();
                    }
                });
    
            });
  • 相关阅读:
    BZOJ1787 [Ahoi2008]Meet 紧急集合[结论题]
    poj3728 The merchant[倍增]
    poj2750 Potted Flower[线段树]
    poj2482 Stars in Your Window[扫描线]
    poj2182 Lost Cows[BIT二分]
    UVA12096 The SetStack Computer
    第05组(65) 需求分析报告
    团队介绍与选题报告
    数据采集技术第三次作业
    结对编程作业
  • 原文地址:https://www.cnblogs.com/baiyangyuanzi/p/6568237.html
Copyright © 2011-2022 走看看