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


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与webservice的通信实现代码
Dec 25 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
微信小程序商品详情页底部弹出框
Nov 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
使用php计算排列组合的方法
2013/11/13 PHP
php获取文章内容第一张图片的方法示例
2017/07/03 PHP
js left,right,mid函数
2008/06/10 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
jquery实现上下左右滑动的方法
2015/02/09 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
Python中的sort()方法使用基础教程
2017/01/08 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
python的debug实用工具 pdb详解
2019/07/12 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
Python日志syslog使用原理详解
2020/02/18 Python
python实现IOU计算案例
2020/04/12 Python
python+opencv实现车道线检测
2021/02/19 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
法雷奥SQA(electric)面试问题
2016/01/23 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
平面设计岗位职责
2013/12/14 职场文书
车辆安全检查制度
2014/01/12 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
电教室标语
2014/06/20 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
学校端午节活动总结
2015/02/11 职场文书
作息时间调整通知
2015/04/22 职场文书