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

        });