解决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 ...
随机推荐
- 基于ssh反向代理实现的远程协助
本文描述了怎么通过ssh反向代理实现远程协助,并提供了相关代码. 可满足web开启远程协助功能后,维护人员能够通过ssh和http登录客户机器(包括在nat环境下) web开启该功能后,ssh才能登录 ...
- WebForm 控件(二)
控件 Calendar:日历控件 但是html代码量太大不适用 FileUpdate: 文件上传 HiddenField:隐藏域 Image: 图片 可以直接给URL 不适用可用html代码写 Ta ...
- 从jvm的角度来看java的多线程
最近在学习jvm,发现随着对虚拟机底层的了解,对java的多线程也有了全新的认识,原来一个小小的synchronized关键字里别有洞天.决定把自己关于java多线程的所学整理成一篇文章,从最基础的为 ...
- java_db2错误码对应值
DB2-SQLSTATE消息 2012-08-27 10:35:27| 分类: db2|举报|字号 订阅 本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子 ...
- (@WhiteTaken)设计模式学习——原型模式
有这样一个需求,两个对象,只是名称以及其他几个属性不一样,而其他的大部分的属性都是相同的. 这时候我们可以用到原型模式,也就是克隆模式. 原型模式:原型模式是一个对象创建型模式,通过克隆原对象,可以使 ...
- contenteditable实现可编辑的HTML标签
最近工作中遇到了一个小问题,让我学到了新的标签属性--contenteditable. 我需要实现的是手机端界面,特别简单的一个页面,如下图: 在我脑海里第一时间想到的应该就是一个form表单然后里面 ...
- Yarn init 命令在 Git Bash 中打开时的错误
最近一直在学习一些新的知识,ES5.ES6.Vue等,当然,作为程序,英文的阅读和听写能力也是要去学习的. 最近慕课网上的qbaty大神出了两套视频,分别是webpack和yarn,本着不断学习的精神 ...
- 2月22日 《从Paxos到Zookeeper 分布式一致性原理与实践》读后感
zk的特点: 分布式一致性的解决方案,包括:顺序一致性,原子性,单一视图,可靠性,实时性 zk的基本概念: 集群角色:not Master/Slave,is Leader/Follower/Obser ...
- c#模拟js escape方法(转)
实现URI字符串转化成escape格式的字符 public static string Escape(string s) { StringBuilder sb ...
- Codeforces Round #372 +#373 部分题解
用了两场比赛上Div 1感觉自己好腊鸡的说...以下是这两场比赛的部分题解(不得不说有个黄学长来抱大腿还是非常爽的) Round #372 : Div 2 A:Crazy Computer 题意:给定 ...