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

问题:在中文输入法输入文字时按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:

  1. KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。
  2. KeyPress主要用来捕获数字(注意:包括Shift+数字的符号)、字母(注意:包括大小写)、小键盘等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键外的ANSI字符
  3. KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn所有按键
  4. KeyPress 只能捕获单个字符
  5. KeyDown 和KeyUp 可以捕获组合键。
  6. KeyPress 可以捕获单个字符的大小写
  7. KeyDown和KeyUp 对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写。
  8. KeyPress 不区分小键盘和主键盘的数字字符。
  9. KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。
  10. 其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。
  11. 在使用键盘的时候,通常会使用到CTRL+SHIFT+ALT 类似的组合键功能。 
时间: 2024-08-01 03:39:15

输入法的回车与消息发送快捷键回车的冲突的相关文章

Oracle触发器如何调用Java实现Openfire消息发送

写在前面,要想实现整个过程的成功执行请先准备以下文件: 1. 登陆Openfire服务端以及Spark客户端相关程序(openfire_4_0_1.exe.spark_2_7_6.exe) 2. 连接Openfire和Oracle相关的jar包(presence.jar.smack.jar.smackx-debug.jar.smackx.jar.ojdbc.jar)  Step1:安装Openfire服务端并配置数据库连接,配置参考<Openfire服务器安装与配置教程> Step2:在Ecl

TeamTalk Android代码分析(业务流程篇)---消息发送和接收的整体逻辑说明

第一次纪录东西,也没有特别的顺序,想到哪里就随手画了一下,后续会继续整理- 6.2消息页面动作流程 6.2.1 消息页面初始化的总体思路 1.页面数据的填充更新直接由页面主线程从本地数据库请求 2.数据库数据的填充由后台线程异步方式从网络请求 3.前台线程每次按照18条记录读取数据库数据,后台线程按照每次18*3从网络请求数据 4.后台线程数据的请求由主线程满足一定的条件后发送总线事件,在 oneventbackgroudthread 中处理,具体条件(或的关系)如下: 1>第一次请求 2>本

C#实现QQ消息发送工具

.Net WinForm程序,实现的QQ消息发送,必须是QQ好友 可用于营销软件,QQ消息群发 软件核心模块,

Unity内置的三套消息发送机制的应用实例

转自http://blog.sina.com.cn/s/blog_1491e52310102wuf6.html 代码简介 : [1] 实例中包含2个类文件, SendMessage.cs 和 ReceiveMessage.cs , 分别为消息发送端和消息接收端. [2] Unity内置的消息发送系统有一个很特别的地方 - 即使接收端的方法类型为 private 或者 protected, 也能够收到信息. [3] Unity内置了3套消息机制,它们分别为 1. SendMessage() 向自己

msgX消息发送增强工具[下载]

熟悉命令行工具msg的人都知道,它发送的消息只能单行显示,如果你希望以多行的形式来显示消息是不行的.经过几天时间研究,我开发了一个增强版的消息发送工具msgX,它仍是以msg为基础,只要能用msg的地方就能使用msgX,使用方法也基本相同.下面是msgX的源代码,如有问题欢迎各位大虾指正. ::Based on MSG.EXE ::Designed By Computer Studio Of Zhou Zhou On 2016.7.7 @echo off if "%1"=="

Objective-C 消息发送与转发机制原理

消息发送和转发流程可以概括为:消息发送是 Runtime 通过 selector 快速查找 IMP 的过程,有了函数指针就可以执行对应的方法实现:消息转发是在查找 IMP 失败后执行一系列转发流程的慢速通道,如果不作转发处理,则会打日志和抛出异常. http://www.huanbohailawyer.com/e/space/?userid=52858?feed_filter=ks&lk20160609=&85 http://www.huanbohailawyer.com/e/space/

Chromium的IPC消息发送、接收和分发机制分析

由于Chromium采用多进程架构,因此会涉及到进程间通信问题.通过前面一文的学习,我们知道Browser进程在启动Render进程的过程中会建立一个以UNIX Socket为基础的IPC通道.有了IPC通道之后,接下来Browser进程与Render进程就以消息的形式进行通信.我们将这种消息称为IPC消息,以区别于线程消息循环中的消息.本文就分析Chromium的IPC消息发送.接收和分发机制. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! Chrom

C#开发微信门户及应用(19)-微信企业号的消息发送(文本、图片、文件、语音、视频、图文消息等)

我们知道,企业号主要是面向企业需求而生的,因此内部消息的交流显得非常重要,而且发送.回复消息数量应该很可观,对于大企业尤其如此,因此可以结合企业号实现内部消息的交流.企业号具有关注安全.消息无限制等特点,很适合企业内部的环境.本文主要介绍如何利用企业号实现文本.图片.文件.语音.视频.图文消息等消息的发送操作. 1.企业号特点 对于企业号,有以下一些特点: 1)关注更安全 –只有企业通讯录的成员才能关注企业号,分级管理员.保密消息等各种特性确保企业内部信息的安全. 企业可以设置自行验证关注者身份

MQ中将消息发送至远程队列的配置

MQ中将消息发送至远程队列的配置 摘自MQ资源管理器帮助文档V7 在开始学习本教程之前,您需要从系统管理员处了解标识网络上接收机器的名称:IP地址.MQ的端口号.队列管理器.接收(远程机器)或者是发送的队列(本地机器)名称. 消息传递如图示: 本教程介绍了如何设置一台计算机上的队列管理器 QM_ORANGE 与另一台计算机上的队列管理器 QM_APPLE 之间的消息传递.在第一台计算机上创建的消息被传递到第二台计算机上的队列 Q1(此队列被称为远程队列). 要点: 在本教程中,您将使用创建了队列