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


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 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
javascript操作ul中li的方法
May 14 Javascript
Angular-Touch库用法示例
Dec 22 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
Jul 19 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python遍历数组的方法小结
2015/04/30 Python
python中查看变量内存地址的方法
2015/05/05 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python3中rank函数的用法
2019/11/27 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
c语言常见笔试题总结
2016/09/05 面试题
车间主任岗位职责
2015/02/03 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
详解Redis主从复制实践
2021/05/19 Redis