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

问题:在中文输入法输入文字时按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 类似的组合键功能。

以上这篇输入法的回车与消息发送快捷键回车的冲突解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2016-08-07

MySQL数据库INNODB表损坏修复处理过程分享

突然收到MySQL报警,从库的数据库挂了,一直在不停的重启,打开错误日志,发现有张表坏了.innodb表损坏不能通过repair table 等修复myisam的命令操作.现在记录下解决过程,下次遇到就不会这么手忙脚乱了. 处理过程: 一遇到报警之后,直接打开错误日志,里面的信息: InnoDB: Database page corruption on disk or a failed InnoDB: file read of page 30506. InnoDB: You may have t

MySQL数据库InnoDB数据恢复工具的使用小结详解

本文从实际使用经验出发,介绍一款开源的MySQL数据库InnoDB数据恢复工具:innodb-tools,它通过从原始数据文件中提取表的行记录,实现从丢失的或者被毁坏的MySQL表中恢复数据.例如,当你不小心执行DROP TABLE.TRUNCATE TABLE或者DROP DATABASE之后,可以通过以下方式恢复数据.以下内容大部分参考自:Percona Data Recovery Tool for InnoDB,文档是英文的,而且写的比较晦涩,这里是个人的实战经验总结,供大家参考学习.在介

MySQL数据库InnoDB引擎下服务器断电数据恢复方法

说明: 线上的一台MySQL数据库服务器突然断电,造成系统故障无法启动,重新安装系统后,找到之前的MySQL数据库文件夹. 问题: 通过复制文件的方式对之前的MySQL数据库进行恢复,发现在程序调用时找不到数据库中的表,造成网站无法正常访问. 分析: 1.MySQL数据库,使用拷贝文件方式来恢复数据库,只支持MyISAM引擎: 2.如果有数据库或数据表使用了InnoDB引擎,恢复的时候,必须连同MySQL数据库目录下的ibdata1文件一起拷贝过来. 解决办法: 1.停止MySQL服务 serv

PHP操作mysql数据库分表的方法

一般来说,当我们的数据库的数据超过了100w记录的时候就应该考虑分表或者分区了,这次我来详细说说分表的一些方法.首先,我们需要想好到底分多少个 表,前提当然是满足应用.这里我使用了一个比较简单的分表方法,就是根据自增id的尾数来分,也就是说分0-9一共10个表,其取值也很好做,就是对10 进行取模.另外,还可以根据某一字段的md5值取其中几位进行分表,这样的话,可以分的表就很多了. 好了,先来创建表吧,代码如下: CREATE TABLE `ttlsa_com`.`article_0` ( `i

MySQL数据库InnoDB引擎主从复制同步经验总结

近期将公司的MySQL架构升级了,由原先的一主多从换成了DRBD+Heartbeat双主多从,正好手上有一个电子商务网站新项目也要上线了,用的是DRBD+Heartbeat双主一从,由于此过程还是有别于以前的MyISAM引擎的,所以这里也将其心得归纳总结了一下: 1)MySQL的replication过程是一个异步同步的过程,并非完全的主从同步,所以同步的过程中是有延迟的,如果做了读写分离的业务的话,建议也要监控此延迟时间: 2)MySQL的master与slave机器记得server-id要保

提高MySQL中InnoDB表BLOB列的存储效率的教程

首先,介绍下关于InnoDB引擎存储格式的几个要点: 1.InnoDB可以选择使用共享表空间或者是独立表空间方式,建议使用独立表空间,便于管理.维护.启用 innodb_file_per_table 选项,5.5以后可以在线动态修改生效,并且执行 ALTER TABLE xx ENGINE = InnoDB 将现有表转成独立表空间,早于5.5的版本,修改完这个选项后,需要重启才能生效: 2.InnoDB的data page默认16KB,5.6版本以后,新增选项 innodb_page_size

使用Memcache缓存mysql数据库操作的原理和缓存过程浅析

对于大型网站如facebook,ebay等网站,如果没有Memcache做为中间缓存层,数据访问不可能吃得消,对于一般网站,只要具备独立的服务器,完全可以通过配置Memcache提高网站访问速度和减少数据库压力,这里主要讨论一下Memcache和MySQL数据库交互过程的流程关系,了解Memcache的中间缓存层作用,从而深入了解Memcache机制原理. Memcache和MySQL交互流程图 如上图,传统的查询方法是直接查询数据库,数据库将结果返回给查询语句,而当有Memcache中间缓存层

mysql数据库常见的优化操作总结(经验分享)

前言 对于一个以数据为中心的应用,数据库的好坏直接影响到程序的性能,因此数据库性能至关重要.所以mysql数据库的优化操作大家都要有所了解,本文就主要总结了mysql数据库中常见的优化操作,下面话不多说了,来看看详细的介绍吧. 一.Index索引 将Index放第一位,不用说,这种优化方式我们一直都在悄悄使用,那便是主键索引.有时候我们可能并不在意,如果定义适合的索引,数据库查询性能(速度)将提高几倍甚至几十倍. 普通索引 作用是提高查询速度. 建表,创建索引 CREATE TABLE tbl_

Windows服务器下MySql数据库单向主从备份详细实现步骤分享

一.目的:将主服务器中的MySql数据库同步到从服务器中,使得对主服务器的操作可以即时更新到从服务器,避免主服务器因环境或者网络异常一时无法使用,达到备份效果. 二.环境: 主从服务器操作系统.数据库版本均相同,具体如下: 操作系统:Windows 2003 Server R2 MySql数据库版本:5.0.51b 主服务器(用A代替)IP地址:192.168.4.100 从服务器(用B代替)IP地址:192.168.4.101 三.配置过程: 1.在A创建远程访问备份账户. 在A的MySql数

MySQL基准测试套件Benchmark安装DBI组件过程分享

今天打算用MySQL自带的基准测试套件(Benchmark Suite)来测试一下插入性能,结果出现错误: 复制代码 代码如下: # 还是交代一下环境吧 [root@beanvm ~]# cat /etc/redhat-release Red Hat Enterprise Linux Server release 6.2 (Santiago) [root@beanvm ~]# uname -a Linux beanvm 2.6.32-220.el6.i686 #1 SMP Wed Nov 9 0