解决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();
}
});
});
解决input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能的更多相关文章
- 表单中设置了 `keyup.enter.native` 的按键事件,但是回车后没有执行查询,反而会刷新页面
场景 添加属性对话框中,input输入后点击 enter,不会执行绑定的 handleDialogQuery 事件,反而会刷新整个页面: 如果不点击 enter,点击搜索按钮,则是正常的. 又测试:在 ...
- C#按回车Enter使输入焦点自动跳到下一个TextBox的方法收集
在录入界面中,用户往往需要按回车键时光标自动跳入下一个文本框,以方便录入操作.在C#中实现该功能有多种方法,以下是小编收集的不使用TAB键,而直接用回车键将光标转到下一个文本框的实现方法. 一.利用W ...
- 浏览器中回车(Enter)和刷新的区别是什么?[转载]
在浏览器中回车和F5刷新有什么区别那?今天就来说说:浏览器中回车(Enter)和刷新的区别是什么? 这点事. 概论: 1.回车在 Expires有效的时候,是不会去请求服务器的,打开调试看到的请求也只 ...
- 解决<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 过长
解决<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 过长 <i ...
- 解决VS2010中winsock.h与winsock2.h冲突(重复定义)——转载
解决VS2010中winsock.h与winsock2.h冲突(重复定义)——转载 当这两个头文件顺序颠倒时,编译会出现许多莫名其妙的错误,错误如下: 1>…\include\ws2def.h( ...
- 项目总结21:项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库)
项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...
- 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 ...
- js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法
HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...
- 监视在input框中按下回车(enter) js实现
function getKey(event) { if (event.keyCode == 13) { alert("我是回车键"); } } <input type=&qu ...
随机推荐
- SPI在linux3.14.78 FS_S5PC100(Cortex A8)和S3C2440上驱动移植(deep dive)
由于工作的原因,对SPI的理解最为深刻,也和SPI最有感情了,之前工作都是基于OSEK操作系统上进行实现,也在US/OS3上实现过SPI驱动的实现和测试,但是都是基于基本的寄存器操作,没有一个系统软件 ...
- HDU1166(分块)
敌兵布阵 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status ...
- mac下导出kindle单词本的单词
平常都是用kindle来看电子书,偶尔也会看上一些英文书籍,不可避免的会遇到不少陌生的单词,而kindle专门针对这种需求,做了不少优化,可以直接在kindle上面查阅单词,甚至可以背单词.但是毕竟不 ...
- JS Proptotyp以及__proto__
一直以来都特别疑惑js原型链的只是,每次看到类似的文章也是迷迷糊糊,今天终于有点小的感悟,记录下来 在JS中一切都是对象,而通过其它的面向对象语言,对象又是类型的实例,所以类型和对象是不同的,那么在j ...
- Apache工作原理
Apache工作原理 在开始了解Apache前,我们先熟悉一下web服务器,因为apache也是web服务器的一种. Web系统由客户端(浏览器)和服务 ...
- Java语言基本语法(一)————关键字&标识符(Java语言标识符命名规范&Java语言的包名、类名、接口名、变量名、函数名、常量名命名规则 )
一.关键字 关键字的定义和特点 定义:被Java语言赋予特殊含义,用做专门用途的字符串(单词). 特点:关键字中所有字母均为小写 下面列举一些常用的关键字. 用于定义数据类型的关键字:byte.sho ...
- C# GDI绘图之——画笔和画刷
绘制图形需要画笔和画刷: Pen(画笔类): Pen为C#编程语言中专门的画笔类 使用方式: // 用系统颜色来初始化我们的画笔类,使用Color静态类中的颜色 1. Pen p1 = new Pen ...
- HTML学习二
继续上一次的学习: <html> <head> <title>新增雇员</title> <script language="javasc ...
- block循环饮用解决
在block中使用self会引起循环引用导致无法释放. 解决: __weak typeof(self) weakSelf = self; 例如: NSLog(@"init--> val ...
- 浅解.Net分布式锁的实现
序言 我晚上有在公司多呆会儿的习惯,所以很多晚上我都是最后一个离开公司的.当然也有一些同事,跟我一样喜欢在公司多搞会儿.这篇文章就要从,去年年末一个多搞会的晚上说起,那是一个夜黑风高的晚上,公司应该没 ...