相信各位在平时接需求的时候肯定会遇到这样的一些需求,例如,要求输入框限制输入长度,限制输入类型,限制只能英文输入,限制只能输入大写字母等等,这时候我们一般的思路无非两种,一种是弹出特定的键盘,第二种是在输入的过程中对输入内容进行正则匹配,然后根据自己的需求对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. AWS:2.根设备类型、EC2生命周期状态、User Data

    主要内容 1.根设备类型 linux: /dev/sda1 windows: 系统盘 2.实例生命周期 生命周期状态:停止.终止.重启 3.用户数据(UserData) 实例在初始化,运行之前给定的用 ...

  2. Mac版 Intellij IDEA 激活

    第一步:修改这两个文件夹 进入跳转路径,输入 /private/etc/ 点击[前往] 同时加上: # Intellij IDEA0.0.0.0 account.jetbrains.com 第二部:在 ...

  3. 【题解】Coins(二进制拆分+bitset)

    [题解]Coins(二进制拆分+bitset) [vj] 俗话说得好,bitset大法吼啊 这道题要不是他多组数据卡死了我复杂度算出来等于九千多万的选手我还不会想这种好办法233 考虑转移的实质是怎样 ...

  4. quick-cocos2d-x教程11:实现http通信,并与站点php对接,可实现登录等常见功能

    手机游戏眼下是弱联网居多,http登录是经常使用功能.我们如今就来实现. 在启动时候.自己主动请求http. function MainScene:ctor()     local url = &qu ...

  5. 移动端 (H5) 调试工具 -- vconsole

    最近在改一个移动端项目,在手机上调试贼头疼,什么日志都看不到,分析不了bug问题. 然后我同事给我介绍了一个移动端的调试神器 -- vconsole 有了这个神器,领导再也不用担心我的工作啦!!! 0 ...

  6. Unity基本API总览

  7. 基础 PHP 语法

    PHP 脚本在服务器上执行,然后向浏览器发送回纯 HTML 结果. 基础 PHP 语法 PHP 脚本可放置于文档中的任何位置. PHP 脚本以 <?php 开头,以 ?> 结尾: < ...

  8. Python爬虫 —— 抓取美女图片(Scrapy篇)

    杂谈: 之前用requests模块爬取了美女图片,今天用scrapy框架实现了一遍. (图片尺度确实大了点,但老衲早已无恋红尘,权当观赏哈哈哈) Item: # -*- coding: utf-8 - ...

  9. python之tkinter_1

    以下内容来自:https://blog.csdn.net/wangyiyan315/article/details/16361065 from tkinter import * # 导入tkinter ...

  10. 纯CSS3左右滑动开关按钮

    纯CSS3特效左右滑动开关按钮是一款非常酷的CSS3 3D开关按钮,点击按钮可以左右滑动,就像开关打开闭合一样的效果. http://www.huiyi8.com/sc/10626.html