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


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 相关文章推荐
jquery中对表单的基本操作代码
Jul 29 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
Vue底层实现原理总结
Feb 17 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
Three.JS实现三维场景
Dec 30 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 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 FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
BootStrap中Datepicker控件带中文的js文件
2016/08/10 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
Django数据库操作的实例(增删改查)
2017/09/04 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
如何一键升级Python所有包
2020/11/05 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
教师节促销活动方案
2014/02/14 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
我的理想演讲稿
2014/04/30 职场文书
领导干部保密承诺书
2014/08/30 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书