需求：点击需求：点击添加标签，出来input框，内容输入完成后点击enter键和blur时都可以执行提交标签的效果，提交时对内容进行判断，执行完成后清除input内的内容。如下图

问题：内容输入完成后blur事件执行没有问题，但是keypress时会先执行keypress然后在执行blur，因前一个事件执行后input框情况，blur执行时会告知用户未输入内容，导致体验极差。
解决：好吧，写到这里我发现我错了，因为始终都会执行blur函数，我直接只写一个blur事件就好了啊，啊啊啊，痛苦，想了那么多就这么简单。
其他：但是如果keypress 和 blur 要执行的内容不一样的话，可以加个定时器来解决这个问题

keypress 和 blur 事件冲突的问题的更多相关文章

  1. jquery点击click事件和blur事件冲突如何解决

    最近做了一个查询小功能,input输入框输入文字后,自动列出几条查询结果,可以键盘上下键或鼠标进行查询结果选择,并且点击输入框其他地方要隐藏这个列出的结果. 但比较头疼的是input上添加blur事件 ...

  2. click和blur事件冲突解决方案

    场景:例如做一个模仿百度搜索的搜索框,输入文字下面会有匹配项,当点击下拉项中的值时,就将值添加到搜索框中同时隐藏下拉框,点击其他地方就直接隐藏下拉框,这时所需要的事件分别为 下拉框事件onclick, ...

  3. blur和click事件冲突

    一.问题描述文本框的blur事件和div元素的click事件出现冲突.在input的blur事件中,我们隐藏div元素.在div的click事件中,我们清除input的内容,并隐藏自身.当我们在inp ...

  4. 下拉选择的blur和click事件冲突了

    当写个下拉选择框时我们希望当input失去焦点时,下拉框消失,或者当选择下拉框中的内容的同时将内容填入input并且使下拉框消失. 这时候我们会想到blur和click,单独使用的时候是没有问题的,但 ...

  5. input中blur失去焦点事件与点击事件冲突时如何解决

    方法一 使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(". ...

  6. Web页面多对象多文档事件冲突的解决方案

    这段时间写了很多基于js和jquery的前端控件,每一个的功能都很复杂,事件也很多. 因为都是单独封装的,单独使用没有问题,但把他们放到一个页面使用,就经常发生事件冲突的问题. 这几天一直在考虑用一个 ...

  7. webview滑动事件 与内部html左右滑动事件冲突问题的解决办法

    最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...

  8. input 的blur事件之后button的onclick事件不执行解决方案

    最近发现网页程序中有个BUG,就是在input标签输入框中输入完数据后,直接点击“取消” 按钮的时候.出现网页崩死的情况: 经过小主酸菜我,各种方法的尝试后,找到一个初步可以解决的方案,在这里分享给大 ...

  9. 说说focus /focusin /focusout /blur 事件

    事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusou ...

随机推荐

  1. 学习笔记：flutter项目搭建(mac版)

    什么是flutter Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的 ...

  2. 百万年薪python之路 -- MySQL数据库之 常用数据类型

    MySQL常用数据类型 一. 常用数据类型概览 # 1. 数字: 整型: tinyint int bigint 小数: float: 在位数比较短的情况下不精确 double: 在位数比较长的情况下不 ...

  3. 百万年薪python之路 -- 并发编程之 多线程 二

    1. 死锁现象与递归锁 进程也有死锁与递归锁,进程的死锁和递归锁与线程的死锁递归锁同理. 所谓死锁: 是指两个或两个以上的进程或线程在执行过程中,因为争夺资源而造成的一种互相等待的现象,在无外力的作用 ...

  4. config.xml

    ASP.NET应用程序的配置信息都存放于Web.config配置文件中,Web.config配置文件是基于XML格式的文件类型,由于XML文件的可伸缩性,使得ASP.NET应用配置变得灵活.高效.容易 ...

  5. openresty性能测试报告分析

    一.openresty介绍 1.什么是openresty 通过揉和众多设计良好的 Nginx 模块,OpenResty 有效地把 Nginx 服务器转变为一个强大的 Web 应用服务器,基于它开发人员 ...

  6. json基本内容

    json的基本信息和历史 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于欧洲计算机协会制定的js规范的一个子集,采用完全独立于编程语言的文本格式来 ...

  7. ICollection IEnumerable/IEnumerator IDictionaryEnumerator yield

    Enumerable和IEnumerator接口是.NET中非常重要的接口,二者区别: 1. IEnumerable是个声明式的接口,声明实现该接口的类就是“可迭代的enumerable”,但并没用说 ...

  8. kaldi中CD-DNN-HMM网络参数更新公式手写推导

    在基于DNN-HMM的语音识别中,DNN的作用跟GMM是一样的,即它是取代GMM的,具体作用是算特征值对每个三音素状态的概率,算出来哪个最大这个特征值就对应哪个状态.只不过以前是用GMM算的,现在用D ...

  9. python：枚举类型

    1.什么是枚举类型? 枚举类型可以看做是一系列常量的集合,通常用于表示某些有限且固定的集合,例如月份(一年有12个月).星期(一星期有七天).季节(一年四个季节)等. 2.枚举的定义 定义枚举首先要导 ...

  10. 使用Java调用exe可执行文件

    一.出发点 平日里,我们看到了很多已经成型的可执行文件,而且经过了一定的封装.因为开源的关系,大多时候可以自己使用eclipse进行编译,但也常常遇到不如直接调用更加方便的情况.那么这时候,我个人需要 ...