相信各位在平时接需求的时候肯定会遇到这样的一些需求,例如,要求输入框限制输入长度,限制输入类型,限制只能英文输入,限制只能输入大写字母等等,这时候我们一般的思路无非两种,一种是弹出特定的键盘,第二种是在输入的过程中对输入内容进行正则匹配,然后根据自己的需求对input框进行赋值。弹出特定键盘可以通过对input框的type属性进行赋值,但由于不同的浏览器对弹出的输入框都有比较严格的限制,并且弹出之后用户可以进行切换,达不到限制用户输入的目的,所以接下来主要讨论第二种方法。

一般说到修改用户的输入,第一个想法肯定是绑定input事件,input事件能够检测用户的每一次输入,例如我们要将用户输入的文字实时转换成大写,只需要input事件绑定以下方法

function(e){
e.target.value=e.target.value.toUpperCase()
}
这种方法对于英文输入时完全没毛病,但是一旦用户切换到中文输入法或者手写输入,你就会发现,问题来了,input事件会触发,但你每次捕获到的e.target.value却不是你输入的中文,例如我们执行下面的代码

document.getElementById('testInput').addEventListener('input',function(e){
console.log('输入内容:'+e.target.value);
},false);
你会发现是这样一种情况(测试工具:chome,ie经过测试并未存在此问题)

那么,我们如何捕获中文输入法或者其他非直接输入法的输入状态呢,参考以下两个事件

1.compositionstart,事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)

2.compositionend,当文本段落的组成完成或取消时, compositionend 事件将被激发 (具有特殊字符的激发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)

简单来说,非直接输入法如中文输入开始时,触发compositionstart事件,结束时触发compositionend事件,这样,我们跟input事件进行配合,就能对所有的输入进行实时的检测了,示例代码如下

window.onload=function(){
var doing=false;
var doSomething=function(e){
//我要干点啥
}
document.getElementById('testInput').addEventListener('compositionstart',function(e){
doing=true;
},false);
document.getElementById('testInput').addEventListener('input',function(e){
if(!doing){
doSomething();
}
},false);

document.getElementById('testInput').addEventListener('compositionend',function(e){
doing=false;
doSomething();
},false);
}
最后,这两个事件比较新,并不兼容所有的浏览器,但经过测试,兼容目前大部分的移动端浏览器,ie9仿真情况下测试通过,chome测试通过,Firefox9.0以上测试通过

参考资料:

compositionstart相关

compositionend相关
---------------------
作者:小敏哥
来源:CSDN
原文:https://blog.csdn.net/handsomexiaominge/article/details/80977402
版权声明:本文为博主原创文章,转载请附上博文链接!

js如何判断当前文本的输入状态——中文输入法的那些坑的更多相关文章

  1. css 笔记——设置禁用中文输入法

    ime-mode ime-mode的语法解释如下: ime-mode : auto | active | inactive | disabled 取值: auto  : 默认值.不影响IME的状态.与 ...

  2. js可以关闭android页面上的键盘输入法

    尝试让获取焦点的元素失去焦点,document.activeElement.blur() js实现焦点进入文本框内关闭输入法:imeMode2011-05-26 11:23要用到的东西: imeMod ...

  3. js 判断一个文本框是否获得焦点

    1.js 判断一个文本框是否获得焦点 // 可以用document.activeElement判断 // document.activeElement表示当前活动的元素   // 查找你要判断的文本框 ...

  4. JS对输入判断变化屏蔽中文输入法输入时连续触发事件的方法

    代码如下: //智能搜索提示 IntelligenceSearch: function IntelligenceSearch() { $('#keyWord').on('input', functio ...

  5. js中文输入法字符串截断

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

    一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...

  7. 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题

    前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...

  8. 关于JS中判断是数字和小数的正则表达式用法

    关于JS中判断是数字和小数的正则表达式用法 正则表达式 正则表达式是由一个字符序列形成的搜索模式. 当你在文本中搜索数据时,你可以用搜索模式来描述你要查询的内容. 正则表达式可以是一个简单的字符,或一 ...

  9. 原生JS实现简单富文本编辑器2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Django项目高频使用文件

    数据库配置: MySQL数据库 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'HOST': 'localhost' ...

  2. Linux就该这么学--Shell脚本条件语句(二)

    1.for条件语句 先读取多个不同的变量值,然后逐一执行同一组命令. 从列表文件中读取主机地址,逐个测试是否在线. 从ipadds.txt中读取主机地址后赋值给HLIST变量后逐个ping列表中的主机 ...

  3. 公司IIS 项目公布 注意点

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/sat472291519/article/details/24010721 IIS - 右键 - 属性 ...

  4. 常见C C++问题(转)

    这一部分是C/C++程序员在面试的时候会被问到的一些题目的汇总.来源于基本笔试面试书籍,可能有一部分题比较老,但是这也算是基础中的基础,就归纳归纳放上来了.大牛们看到一笑而过就好,普通人看看要是能补上 ...

  5. Java for LeetCode 098 Validate Binary Search Tree

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...

  6. log4net 初步使用

    自从知道了log4net之后,就一直使用的它,一直没有问题,最近由于项目变动,便将一部分的代码分离出来,然后咋UI项目中调用loghelper,便发现在本地测试一切正常,可是发布到服务器之后便不正常了 ...

  7. 如何使用安信可 ESP 系列一体化开发环境【转】

    本文转载自:http://wiki.ai-thinker.com/ai_ide_use 关于 Problems 报错 注意:Eclipse 只是一个代码编写工具,它并不能读取 makefile 里面的 ...

  8. Linux常用命令全集

    一,安装和登陆命令1,进入图形界面 startx 2,进入图形界面 init 5 3,进入字符界面 init 34,登陆 login 5,关机 poweroff -p 关闭机器的时候关闭电源-n 在关 ...

  9. Android窗口系统第三篇---WindowManagerService中窗口的组织方式

    Android窗口系统第一篇—Window的类型与Z-Order确定 Android窗口系统第二篇—Window的添加过程 上面文章梳理了一个窗口的添加过程,系统中有很多应用,每个应用有多个Activ ...

  10. BZOJ 1370 [Baltic2003]Gang团伙:并查集【虚点】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1370 题意: 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,而且满足: (1)我 ...