最近做项目遇到:

背景:点击单元格,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();
}
}); });

解决input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能的更多相关文章

  1. 表单中设置了 `keyup.enter.native` 的按键事件,但是回车后没有执行查询,反而会刷新页面

    场景 添加属性对话框中,input输入后点击 enter,不会执行绑定的 handleDialogQuery 事件,反而会刷新整个页面: 如果不点击 enter,点击搜索按钮,则是正常的. 又测试:在 ...

  2. C#按回车Enter使输入焦点自动跳到下一个TextBox的方法收集

    在录入界面中,用户往往需要按回车键时光标自动跳入下一个文本框,以方便录入操作.在C#中实现该功能有多种方法,以下是小编收集的不使用TAB键,而直接用回车键将光标转到下一个文本框的实现方法. 一.利用W ...

  3. 浏览器中回车(Enter)和刷新的区别是什么?[转载]

    在浏览器中回车和F5刷新有什么区别那?今天就来说说:浏览器中回车(Enter)和刷新的区别是什么? 这点事. 概论: 1.回车在 Expires有效的时候,是不会去请求服务器的,打开调试看到的请求也只 ...

  4. 解决<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 过长

    解决<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 过长 <i ...

  5. 解决VS2010中winsock.h与winsock2.h冲突(重复定义)——转载

    解决VS2010中winsock.h与winsock2.h冲突(重复定义)——转载 当这两个头文件顺序颠倒时,编译会出现许多莫名其妙的错误,错误如下: 1>…\include\ws2def.h( ...

  6. 项目总结21:项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库)

    项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...

  7. java算法面试题:编写一个程序,将a.txt文件中的单词与b.txt文件中的单词交替合并到c.txt文件中,a.txt文件中的单词用回车符分隔,b.txt文件中用回车或空格进行分隔。

    package com.swift; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File ...

  8. js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...

  9. 监视在input框中按下回车(enter) js实现

    function getKey(event) { if (event.keyCode == 13) { alert("我是回车键"); } } <input type=&qu ...

随机推荐

  1. SPI在linux3.14.78 FS_S5PC100(Cortex A8)和S3C2440上驱动移植(deep dive)

    由于工作的原因,对SPI的理解最为深刻,也和SPI最有感情了,之前工作都是基于OSEK操作系统上进行实现,也在US/OS3上实现过SPI驱动的实现和测试,但是都是基于基本的寄存器操作,没有一个系统软件 ...

  2. HDU1166(分块)

    敌兵布阵 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  3. mac下导出kindle单词本的单词

    平常都是用kindle来看电子书,偶尔也会看上一些英文书籍,不可避免的会遇到不少陌生的单词,而kindle专门针对这种需求,做了不少优化,可以直接在kindle上面查阅单词,甚至可以背单词.但是毕竟不 ...

  4. JS Proptotyp以及__proto__

    一直以来都特别疑惑js原型链的只是,每次看到类似的文章也是迷迷糊糊,今天终于有点小的感悟,记录下来 在JS中一切都是对象,而通过其它的面向对象语言,对象又是类型的实例,所以类型和对象是不同的,那么在j ...

  5. Apache工作原理

                            Apache工作原理 在开始了解Apache前,我们先熟悉一下web服务器,因为apache也是web服务器的一种. Web系统由客户端(浏览器)和服务 ...

  6. Java语言基本语法(一)————关键字&标识符(Java语言标识符命名规范&Java语言的包名、类名、接口名、变量名、函数名、常量名命名规则 )

    一.关键字 关键字的定义和特点 定义:被Java语言赋予特殊含义,用做专门用途的字符串(单词). 特点:关键字中所有字母均为小写 下面列举一些常用的关键字. 用于定义数据类型的关键字:byte.sho ...

  7. C# GDI绘图之——画笔和画刷

    绘制图形需要画笔和画刷: Pen(画笔类): Pen为C#编程语言中专门的画笔类 使用方式: // 用系统颜色来初始化我们的画笔类,使用Color静态类中的颜色 1. Pen p1 = new Pen ...

  8. HTML学习二

    继续上一次的学习: <html> <head> <title>新增雇员</title> <script language="javasc ...

  9. block循环饮用解决

    在block中使用self会引起循环引用导致无法释放. 解决: __weak typeof(self) weakSelf = self; 例如: NSLog(@"init--> val ...

  10. 浅解.Net分布式锁的实现

    序言 我晚上有在公司多呆会儿的习惯,所以很多晚上我都是最后一个离开公司的.当然也有一些同事,跟我一样喜欢在公司多搞会儿.这篇文章就要从,去年年末一个多搞会的晚上说起,那是一个夜黑风高的晚上,公司应该没 ...