输入法的回车与消息发送快捷键回车的冲突解决方法


Posted in Javascript onAugust 09, 2016

问题:在中文输入法输入文字时按ENTER键;绑定keyup事件会将输入法中的英文文字输入到文字框并直接触发发送按钮

键盘事件:

当一个按键被pressed或者released,在每一个浏览器中都可能会触发三种键盘事件

keydown
keypress
keyup

keydown事件发生在按键被按下的时候,接着触发keypress,松开按键的时候触发keyup事件

中文输入法:

firfox:输入触发keydown,回车确认输入触发keyup
chrome:输入触发keydown、keyup,回车确认输入只触发keydown
IE:输入触发keydown、keyup,回车确认输入触发keydown,keyup
Safari:输入触发keydown、keyup,回车确认输入触发keydown,keyup
opera:输入触发keydown、keyup,回车确认输入触发keydown,keyup
在input、textarea中,中文输入法时:没有触发keypress事件

keypress事件:对中文输入法支持不好,无法响应中文输入;无法响应系统功能键

HTML代码:

<textarea name="" id="text" cols="30" rows="5"></textarea> 
  <script type="text/javascript"> 
    var text = document.getElementById('text'); 
    text.onkeydown = function(e) { 
      console.log('keydown'); 
      if(e.keyCode == 13) { 
        console.log('keydown enter send'); 
      } 
      console.log('value', text.value); 
    } 
    text.onkeypress = function(e) { 
      console.log('keypress'); 
      console.log('value', text.value); 
    } 
    text.onkeyup = function(e) { 
      console.log('keyup'); 
      if(e.keyCode == 13) { 
        console.log('keyup enter send'); 
      } 
      console.log('value', text.value); 
    } 
  </script>

英文输入法:

输入法的回车与消息发送快捷键回车的冲突解决方法

上图可得结论:

keydown、keypress发生在文字还没敲入输入框时,如果在keydown、keypress事件中输出文本框的文本,得到的是触发键盘事件前文本框中的文本;

keyup事件触发时,整个键盘事件输入文字的操作已经完成,得到的是触发键盘事件后的文本内容。

中文输入法:【没有keypress事件

输入法的回车与消息发送快捷键回车的冲突解决方法

按下enter键确认后:

输入法的回车与消息发送快捷键回车的冲突解决方法

中文输入法在输入未确定时按下回车键,keydown与keyup效果不同,keydown不会触发预设的回车方法事件

解答:

大多数输入法都是在keydown中完成输入过程,所以如果回车提交是在keyup事件中的话就会出现输完字后直接触发回车键提交,从而产生冲突问题。

办法:回车提交事件改为keydown,这时候当keydown事件发生的时候是在输入法上,而不会发生在提交框的发送事件上,进而解决了冲突。 

部分tips:

KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。

KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符

KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键

KeyPress 只能捕获单个字符

KeyDown 和KeyUp 可以捕获组合键。

KeyPress 可以捕获单个字符的大小写

KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写。

KeyPress 不区分小键盘和主键盘的数字字符。

KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。

其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

在使用键盘的时候,通常会使用到CTRL+SHIFT+ALT 类似的组合键功能。

以上这篇输入法的回车与消息发送快捷键回车的冲突解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript delete 引用类型对象
Nov 01 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 #Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 #Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 #Javascript
jQuery操作cookie
Aug 08 #Javascript
轮播图组件js代码
Aug 08 #Javascript
JavaScript面试开发常用的知识点总结
Aug 08 #Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 #Javascript
You might like
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
smarty高级特性之对象的使用方法
2015/12/25 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
几个有趣的Javascript Hack
2010/07/24 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
深入浅析Vue中的Prop
2018/06/10 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
python基于property()函数定义属性
2020/01/22 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
酒店总经理助理岗位职责
2014/02/01 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
期末复习计划
2015/01/19 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
西柏坡观后感
2015/06/08 职场文书
2019大学生实习报告
2019/06/21 职场文书
员工给公司的建议书
2019/06/24 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android