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


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(JS)替换节点实现思路介绍
Apr 17 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
轮播的简单实现方法
Jul 28 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
php变量范围介绍
2012/10/15 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
session 加入redis的实现代码
2016/07/15 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
使用Layui搭建后台管理界面的操作方法
2019/09/20 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
Python多线程学习资料
2012/12/19 Python
Python切片用法实例教程
2014/09/08 Python
Python通过select实现异步IO的方法
2015/06/04 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python对象转换为json的方法步骤
2019/04/25 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
如何清空Session
2015/02/23 面试题
计算机毕业生自荐信范文
2014/03/23 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
教你怎么用Python生成九宫格照片
2021/05/20 Python
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS