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();
                    }
                });
    
            });
  • 相关阅读:
    [NOI2009]管道取珠 DP + 递推
    poj3207 Ikki's Story IV
    NOIP2016Day1T2天天爱跑步(LCA+桶)
    NOIP2016Day2T3愤怒的小鸟(状压dp) O(2^n*n^2)再优化
    NOIP2016Day1T3换教室(floyd+期望dp)
    bzoj1854: [Scoi2010]游戏(匈牙利) / GDKOI Day2 T2(最大流)
    [CodeVs4927]线段树练习5
    基数排序的奇技淫巧
    bzoj2724: [Violet 6]蒲公英(离散化+分块)
    bzoj1483: [HNOI2009]梦幻布丁(链表+启发式合并)
  • 原文地址:https://www.cnblogs.com/baiyangyuanzi/p/6568237.html
Copyright © 2011-2022 走看看