两天做一个需要实时监控文本框输入的功能，碰到了中文输入法无法触发onkeyup事件的恶心问题。
具体表现是这样的：
当监听一个input的keyup的事件的时候,英文输入法的情况下可以实时的通过keyup事件检测到文本框value的变化，但是当输入法变成中文后，input的keyup事件就不会被正常触发。这是最先前的写法。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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事件检测文本框内容：
同步被修改
如你所见，这样的写法遇到了中文不能触发keyup事件的问题。于是寻求解决方法，想起来baidu的搜索栏提示似乎是没有这个问题的，于是开始看百度的js。百度的js比较难看...方法命名净是一个字母，最后发现大概是使用了timeout做一个定时器来定时监测input框的修改。不是很满意这样的方法。于是继续查找看有没有更好的解决办法，于是就找到了oninput和onpropertychange两个事件。
oninput是firefox下面可用，而onpropertychange则是ie下可用。两个方法有着一些区别。
oninput只能检测到value这个属性的变化，而onpropertychange则可以检测到包含value的所有属性的变化。于是开始改成这个样子。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
效果如下:
使用oninput以及onpropertychange事件检测文本框内容：
同步被修改
问题这么被解决了。
分享到：
相关推荐
总之，处理中文输入法不触发`onkeyup`事件的问题，可以采用`oninput`和`onpropertychange`事件结合的方式，以确保在各种浏览器环境下都能实现对文本框输入的实时监听。这种方法不仅提高了用户体验，也避免了不必要的...
- 当用户释放按键时触发 `onkeyup` 事件，当按下按键时触发 `onkeydown` 事件。 2. **延时定时器 (setTimeout)** - `setTimeout` 函数用于设置一个延时定时器，在指定的毫秒数之后执行一次函数。 - 本例中，`...
在不同的浏览器中，这些事件的触发顺序和行为可能有所不同，特别是在中文输入法环境下。 对于中文输入法，Firefox、Chrome、IE、Safari和Opera等主流浏览器在输入过程中会有不同的表现。例如，Firefox在输入时仅...
此事件在编辑控件获得焦点前触发，可用于预处理编辑操作，比如初始化输入法或调整界面布局以适应编辑。 #### 7. `onbeforepaste` 在粘贴操作发生前触发，允许开发者控制或过滤将要粘贴的数据，比如阻止特定格式的...
总的来说，解决VIVO手机上Del键无效OnKeyListener不响应的问题，需要深入理解Android系统的事件处理机制，特别是EditText与输入法交互的部分。通过自定义InputConnectionWrapper并适当地处理按键事件，可以确保删除...
而`keydown`和`keyup`事件虽然可以触发，但它们在中文输入法下按下回车键时的`keyCode`识别存在问题，这进一步增加了处理输入内容长度监测的复杂度。 关于如何检测用户是否按下了回车键，这个过程也存在陷阱。在...
- **`onbeforepaste`**：当用户试图粘贴内容到文本框时触发此事件，可以在此事件中预先过滤掉非汉字字符，确保粘贴的内容也只包含汉字。 ### 二、仅允许输入全角字符 全角字符是指宽度为两个标准字符宽度的字符，...
当用户在输入框中输入时，通过`onkeyup`事件监听键盘按键，触发相应的函数，将输入的汉字转换为拼音并显示在页面上。这里有三个变量用于显示不同类型的拼音： 1. `pym`：用于显示汉字的首字母拼音码。 2. `allpym`...
- `target`: 触发事件的元素。 - `currentTarget`: 当前绑定事件处理函数的元素。 ### 2. 使用 `onkeyup` 事件限制输入 #### 2.1 限制输入字符 通过使用`onkeyup`事件，可以实现在用户输入完成后对输入内容进行...
// 其他相关方法如：onKeyDown(), onKeyUp(), startListen(), stopListen() } ``` 在实际开发中，你可能会遇到以下问题： - **兼容性问题**：不同型号的扫码枪可能有不同的蓝牙协议或数据格式，需要针对具体设备...
`onkeyup`事件会在用户释放键盘上的键时触发，而`onbeforepaste`事件会在用户尝试粘贴内容到输入框中之前触发。我们可以在这些事件的处理函数中应用正则表达式来过滤掉非中文字符。 以下是一个具体的实现示例： ``...
- `onkeyup`和`onafterpaste`事件都检查当前值是否为数字，如果不是，则撤销上一步操作。 - `onchange`事件在输入框失去焦点时触发，检查是否有非数字字符。 ##### 10. 控制小数点输入 ```html (!this.value.match...
这个问题是由于Ubuntu系统下中文输入法对`onkeyup`和`onkeydown`事件处理有bug导致的，这可能影响到基于这些事件的交互功能。 接下来是基于jQuery的实现版本。使用jQuery的`$(function(){...})`确保DOM完全加载后...
当用户在输入框中键入字符后，`onkeyup`事件会触发，并通过正则表达式`[^a-zA-Z]`匹配所有非英文字母的字符并将其替换为空字符串，从而达到只允许输入英文字符的效果。 #### 1.2 增强版英文字符输入限制 ```html ...
**5.1 解决中文输入法问题** - **解决方案**：配置Axure RP的相关设置，确保中文输入法能够在输入框中正常使用。 **5.2 超快速移动工作区** - **快捷键使用**：利用快捷键快速移动工作区，提高工作效率。 **5.3 ...