最近做项目遇到:

背景:点击单元格,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. selenium相关面试题

    selenium中如何判断元素是否存在? selenium中hidden或者是display = none的元素是否可以定位到? selenium中如何保证操作元素的成功率?也就是说如何保证我点击的元 ...

  2. 应对linux下的闰秒

    文章作者:luxianghao 文章来源:http://www.cnblogs.com/luxianghao/p/6339470.html  转载请注明,谢谢合作. 免责声明:文章内容仅代表个人观点, ...

  3. 离职了,在家温故而知新----1 设计模式 & 开头

    工作四年有余,编写的代码都是业务代码.不涉及低层. 目前离职在家,过年完了,准备找工作了. 决定温故而知新,复习也是学习. 本着随遇而安的原则,随便从之前设计的众多条目中选择了一条开始复习. 设计模式 ...

  4. 第七届蓝桥杯javaB组真题解析-分小组(第四题)

    题目 /* 分小组 9名运动员参加比赛,需要分3组进行预赛. 有哪些分组的方案呢? 我们标记运动员为 A,B,C,... I 下面的程序列出了所有的分组方法. 该程序的正常输出为: ABC DEF G ...

  5. 使用php实现网站验证码功能【博主推荐】

             验证码是网站常用的一项安全措施,也是新人站长较难掌握的一项技能,这里我向大家介绍一简单有效的验证码实现方法. 开始之前 在正式开始之前我们需要打开php的gd2图形库支持(在php. ...

  6. Storyboard 自定义转场动画

    在storyboard中,segue有几种不同的类型,在iphone和ipad的开发中,segue的类型是不同的.在iphone中,segue 有:push,modal,和custom三种不同的类型, ...

  7. 从C#到TypeScript - 接口

    总目录 从C#到TypeScript - 类型 从C#到TypeScript - 高级类型 从C#到TypeScript - 变量 从C#到TypeScript - 接口 从C#到TypeScript ...

  8. 远程线程注入方法CreateRemoteThread

    最近在整理学习Windows注入方面的知识,这个远程注入前面早写过,现在看看人家博客的理解整理,整理, 需要源码的可以到我的github上下载. 链接是  https://github.com/Ars ...

  9. 360随身wifi无法使用临时解决方案大全

       360随身wifi在绝大多数情况下都是可以正常使用的,但在极少数系统或网络环境下可能会出现异常,如系统服务缺失.公司网络限制.少数校园网客户端限制等等:       360攻城师正在积极努力解决 ...

  10. C#推送RTMP到SRS通过VLC进行取流播放!!

    前面一篇文章简单的介绍了下如何利用SRS自带的播放地址进行观看RTMP直播流,也就是说是使用SRS的内置demo进行Test,但是进行视频直播肯定不可能使用那样的去开发,不开源的东西肯定不好用.由于在 ...