这两天做一个需要实时监控文本框输入的功能，碰到了中文输入法无法触发onkeyup事件的恶心问题。
具体表现是这样的：
当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化，但是当输入法变成中文后，input的keyup事件就不会被正常触发。这是最先前的写法。
<html>
<head>
<script type="text/javascript" src="http://www.zlovezl.cn/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.zlovezl.cn/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>
http://www.zlovezl.cn/articles/12/
分享到：
相关推荐
主要介绍了中文输入法不触发onkeyup事件的解决办法,需要的朋友可以参考下
一般事件 onclick IE3、N2 鼠标点击时触发此事件 ondblclick IE4、N4 鼠标双击时触发此事件 onmousedown IE4、N4 按下鼠标时触发此事件 ...onkeyup IE4、N4 当键盘上某个按键被按放开时触发此事件
onDblClick HTML: 鼠标双击事件 ...onMouseUp HTML: 鼠标按下后，松开时激发的事件 onMouseOver HTML: 当鼠标移动到某对象范围的...onKeyUp HTML: 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
一般事件 事件 浏览器支持 描述 ...onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 ...onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] ……
起初用js 的onkeyup事件，但始终没能触发。该事件不知道别的什么地方监视了，js的事件有传递，也可以阻断，蛮麻烦，情况太多。找了好久，终于找到了一种解决方案，通过onpropertychange事件可以迎刃而解。 代码如下:...
列出一部分： ...onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 onMouseUp IE4|N4|O 鼠标按下...onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
onkeypress和onkeydown以及onkeyup的区别onkeypress和onkeydown以及onkeyup的区别onkeypress和onkeydown以及onkeyup的区别
定义事件的时候，事件函数不会自动执行，当事件触发的时候，会执行 2.事件对象 1）事件对象：当浏览器执行事件的时候，会将所有与事件相关的内容(鼠标位置，触发的目标等)封装为一个对象，并且在触发事件的函数，在...
简单的四则运算，函数用法当松开键盘的按键时触发onkeyup事件自动计算结果，并判断如果为非数字则清空文本框，代码简单实用
主要介绍了通过js实现input输入框只能输入数字的实现方法，主要是通过正则表达式替换实现,需要的朋友可以参考下
onkeyup 事件会在键盘按键被松开时发生。onmousedown 事件会在鼠标按键被按下时发生。onmousemove 事件会在鼠标指针移动时发生。onmouseout 事件会在鼠标指针移出指定的对象时发生。onmouseup 事件会在鼠标按键被...
记事本直播使用onkeyup事件在服务器中自动同步的notpad应用程序。 在package.json目录中运行“ npm install”，然后运行app.js为使应用程序正常运行，必须在端口6379上运行redis服务器运行“ node app.js”以在您的...
浅析OnKeyPress事件和OnKeyDown、OnKeyUp事件
小写数字转换大写金额，onkeyup事件触发js脚本
一，利用键盘响应，在不刷新本页面的情况下验证表单输入是否合法用户通过onkeydown和onkeyup事件来触发响应事件。使用方法和onclick事件类似。onkeydown表示当键盘上的键被按下时触发，onkeyup和它正好相反，当键盘...
jQuery提供了多种绑定事件的方式，每种方式各有其特点，明白了它们之间的异同点，有助于我们在写代码的时候进行正确的选择，从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。 jQuery...
HTML 4.0 的新特性之一是使 HTML 事件触发浏览器中的行为，比方说当用户点击一个 HTML 元素时启动一段 JavaScript。以下就是可被插入 HTML 标签以定义事件行为的一系列属性。 假如你希望学习如何使用这些事件进行...