最近做项目遇到:
背景:点击单元格,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();
}
}); });