中文输入法不触发onkeyup事件的解决办法

2019独角兽企业重金招聘Python工程师标准>>>

这两天做一个需要实时监控文本框输入的功能，碰到了中文输入法无法触发onkeyup事件的恶心问题。

具体表现是这样的：

当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化，但是当输入法变成中文后，input的keyup事件就不会被正常触发。这是最先前的写法。

<html>
<head>
<script type="text/javascript" src="http://www.jb51.net/static/js/jquery-1.4.2.min.js"></script>
</head>
<body> <p> 使用keyup事件检测文本框内容： </p> <p> <input type="text" name="keyup_i" id="keyup_i" autocomplete="off"/> <span id="keyup_s"></span> <script type="text/javascript"> $('#keyup_i').bind('keyup', function(){ $('#keyup_s').text($(this).val()); }) </script> </p>
</body>
</html>

如你所见，这样的写法遇到了中文不能触发keyup事件的问题。于是寻求解决方法，想起来baidu的搜索栏提示似乎是没有这个问题的，于是开始看百度的js。百度的js比较难看...方法命名净是一个字母，最后发现大概是使用了timeout做一个定时器来定时监测input框的修改。不是很满意这样的方法。于是继续查找看有没有更好的解决办法，于是就找到了oninput和onpropertychange两个事件。

oninput是firefox下面可用，而onpropertychange则是ie下可用。两个方法有着一些区别。

oninput只能检测到value这个属性的变化，而onpropertychange则可以检测到包含value的所有属性的变化。于是开始改成这个样子。

<html>
<head>
<script type="text/javascript" src="http://www.jb51.net/static/js/jquery-1.4.2.min.js"></script>
</head>
<body> <p> 使用oninput以及onpropertychange事件检测文本框内容： </p> <p> <input type="text" name="inputorp_i" id="inputorp_i" autocomplete="off"/> <span id="inputorp_s"></span> <script type="text/javascript"> //先判断浏览器是不是万恶的IE，没办法，写的东西也有IE使用者 var bind_name = 'input'; if (navigator.userAgent.indexOf("MSIE") != -1){ bind_name = 'propertychange'; } $('#inputorp_i').bind(bind_name, function(){ $('#inputorp_s').text($(this).val()); }) </script> </p>
</body>
</html>

转载于:https://my.oschina.net/u/1777956/blog/474461

中文输入法不触发onkeyup事件的解决办法相关推荐

input 中文输入法额外触发change事件问题
用ant mobile input 组件实现下面输入提示,提示添加click事件,input 添加change事件. 预期:点击提示项的时候,预期是只触发click事件. 实际:英文输入法正常,只触发 ...
【JQ】动态添加的元素无法触发绑定事件的解决办法
情景如上面的模态框,点击左边的添加按钮,会把整个div添加到右边,点击右边的删除按钮,则把整个div添加回左边,就类似于穿梭框的样子. 不难,下面是一开始想到的方案: $('#SelectedDev ...
工作手记之移动端中文输入法触发oninput事件的解决方法
事件背景工作过程中涉及到了移动端输入内容长度的限定,这就要求需要对输入过程中内容的变化进行监控和判定,以决定是否可以继续输入,所以就想着是否可以在相关输入处监听oninput事件?但是在手机端,中文 ...
VUE扫码枪中文输入法兼容自动回车事件(上)
背景最近产品想要在页面上加一个input输入框,想要手动输入,也想要扫码枪扫描输入,大家都知道扫码枪扫描后会自动出发input的回车enter事件的,我当初也是这么认为的,所以在input上就直接绑 ...
debian中文输入法——拼音和五笔的解决方法
debian中文输入法--拼音和五笔的解决方法转 http://blog.csdn.net/nahancy/article/details/50805574
苹果safari浏览器 button点击不会触发focus事件如何解决？
苹果safari浏览器 button点击不会触发focus事件如何解决? 解决如下: //点击时手动focus <button id="button" type=" ...
form的submit()方法不能触发onsubmit事件的解决方法，兼容各版本浏览器。
form的submit()方法不能触发onsubmit事件的解决方法,兼容各版本浏览器. 参考文章: (1)form的submit()方法不能触发onsubmit事件的解决方法,兼容各版本浏览器. ( ...
win10输入法选字框消失的解决办法
输入法的选字框隐藏的解决办法 win10系统更新后,看不到输入法的选字框的解决办法按图操作即可 !!! 更新前(旧版) 更新后(新版) 一.右键单击桌面右下角输入法图标,打开设置. 如果输入法图标隐 ...
php 析构不执行,PHP析构方法 __destruct() 不触发的两个解决办法
本篇文章主要给大家介绍PHP 析构方法 __destruct() 不触发的两个解决办法. 有时候在 PHP 里类循环引用时,会导致 __destruct() 不触发的问题,先上问题代码:<?ph ...

中文输入法不触发onkeyup事件的解决办法

中文输入法不触发onkeyup事件的解决办法相关推荐

最新文章

热门文章