解决input的回车enter和失焦blur冲突问题：实现回车保存，blur还原编辑内容功能

最近做项目遇到：

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

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

要实现需求：

1、回车键保存编辑内容

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

如下图所示：

编程中遇到的棘手问题：

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

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

inputEditor = $("input.datagrid-editable-input");

    <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;input<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>后，自動獲取聚焦</span>

inputEditor.focus();

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;input失去焦點，撤銷編輯操作，恢復原來的值，不保存</span>
    inputEditor.bind("blur",<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(evt){
        reject();
    });

    </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;按鍵按下，如果是回車鍵，則保存編輯內容</span>
    inputEditor.bind("keypress",<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(evt){
        </span><span style="color: #0000ff;"&gt;var</span> keyCode =<span style="color: #000000;"&gt; evt.keyCode;
        </span><span style="color: #0000ff;"&gt;if</span>(keyCode == 13){  <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;回车事件</span><span style="color: #008000;"&gt;

// alert(evt.keyCode);
$(this).unbind("blur");
accept();

        }
    });

    </span><span style="color: #008000;"&gt;/*</span><span style="color: #008000;"&gt;
    * input獲取焦點后，綁定blur事件
    * 在input已獲取焦點的前提下，點擊文檔任何位置，取消編輯內容
    * 如果是回車鍵按下，則取消綁定blur，保存編輯內容
    * </span><span style="color: #008000;"&gt;*/</span><span style="color: #000000;"&gt;

    inputEditor.bind(</span>"focus",<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(evt){

        $(</span><span style="color: #0000ff;"&gt;this</span>).bind("blur",<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(evt){
            reject();
        });

        $(document).bind(</span>"click",<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
            reject();
        });

        $(</span><span style="color: #0000ff;"&gt;this</span>).bind("keypress",<span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(){
            </span><span style="color: #0000ff;"&gt;var</span> keyCode =<span style="color: #000000;"&gt; evt.keyCode;
            </span><span style="color: #0000ff;"&gt;if</span>(keyCode == 13){  <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;回车事件</span><span style="color: #008000;"&gt;

// alert(evt.keyCode);
$(this).unbind("blur");
accept();
}
});

    });</span></pre>

解决input的回车enter和失焦blur冲突问题：实现回车保存，blur还原编辑内容功能

猜你在找的JavaScript相关文章