解決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();
                }
            });

        });