`
kfcman
  • 浏览: 397357 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

中文输入法无法触发onkeyup事件的问题

    博客分类:
  • js
 
阅读更多
这两天做一个需要实时监控文本框输入的功能,碰到了中文输入法无法触发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事件的解决办法

    总之,处理中文输入法不触发`onkeyup`事件的问题,可以采用`oninput`和`onpropertychange`事件结合的方式,以确保在各种浏览器环境下都能实现对文本框输入的实时监听。这种方法不仅提高了用户体验,也避免了不必要的...

    光标停止输入触发事件 js

    - 当用户释放按键时触发 `onkeyup` 事件,当按下按键时触发 `onkeydown` 事件。 2. **延时定时器 (setTimeout)** - `setTimeout` 函数用于设置一个延时定时器,在指定的毫秒数之后执行一次函数。 - 本例中,`...

    输入法的回车与消息发送快捷键回车的冲突解决方法

    在不同的浏览器中,这些事件的触发顺序和行为可能有所不同,特别是在中文输入法环境下。 对于中文输入法,Firefox、Chrome、IE、Safari和Opera等主流浏览器在输入过程中会有不同的表现。例如,Firefox在输入时仅...

    JavaScript中的所有on事件

    此事件在编辑控件获得焦点前触发,可用于预处理编辑操作,比如初始化输入法或调整界面布局以适应编辑。 #### 7. `onbeforepaste` 在粘贴操作发生前触发,允许开发者控制或过滤将要粘贴的数据,比如阻止特定格式的...

    关于JavaScript限制字数的输入框的那些事

    而`keydown`和`keyup`事件虽然可以触发,但它们在中文输入法下按下回车键时的`keyCode`识别存在问题,这进一步增加了处理输入内容长度监测的复杂度。 关于如何检测用户是否按下了回车键,这个过程也存在陷阱。在...

    js验证输入验证小技巧

    - **`onbeforepaste`**:当用户试图粘贴内容到文本框时触发此事件,可以在此事件中预先过滤掉非汉字字符,确保粘贴的内容也只包含汉字。 ### 二、仅允许输入全角字符 全角字符是指宽度为两个标准字符宽度的字符,...

    JS实现获取汉字首字母拼音、全拼音及混拼音的方法

    当用户在输入框中输入时,通过`onkeyup`事件监听键盘按键,触发相应的函数,将输入的汉字转换为拼音并显示在页面上。这里有三个变量用于显示不同类型的拼音: 1. `pym`:用于显示汉字的首字母拼音码。 2. `allpym`...

    一些常用的特效包括一些javascript中event对象的使用

    - `target`: 触发事件的元素。 - `currentTarget`: 当前绑定事件处理函数的元素。 ### 2. 使用 `onkeyup` 事件限制输入 #### 2.1 限制输入字符 通过使用`onkeyup`事件,可以实现在用户输入完成后对输入内容进行...

    Android设备获取扫码枪扫描的内容与可能遇到的问题解决

    // 其他相关方法如:onKeyDown(), onKeyUp(), startListen(), stopListen() } ``` 在实际开发中,你可能会遇到以下问题: - **兼容性问题**:不同型号的扫码枪可能有不同的蓝牙协议或数据格式,需要针对具体设备...

    js限制文本框只能输入中文的方法

    `onkeyup`事件会在用户释放键盘上的键时触发,而`onbeforepaste`事件会在用户尝试粘贴内容到输入框中之前触发。我们可以在这些事件的处理函数中应用正则表达式来过滤掉非中文字符。 以下是一个具体的实现示例: ``...

    用JS控制INPUT输入内容

    - `onkeyup`和`onafterpaste`事件都检查当前值是否为数字,如果不是,则撤销上一步操作。 - `onchange`事件在输入框失去焦点时触发,检查是否有非数字字符。 ##### 10. 控制小数点输入 ```html (!this.value.match...

    限制字符输入数功能(jquery版和原生JS版)

    这个问题是由于Ubuntu系统下中文输入法对`onkeyup`和`onkeydown`事件处理有bug导致的,这可能影响到基于这些事件的交互功能。 接下来是基于jQuery的实现版本。使用jQuery的`$(function(){...})`确保DOM完全加载后...

    input,验证,闪动,自动删除,限制输入

    当用户在输入框中键入字符后,`onkeyup`事件会触发,并通过正则表达式`[^a-zA-Z]`匹配所有非英文字母的字符并将其替换为空字符串,从而达到只允许输入英文字符的效果。 #### 1.2 增强版英文字符输入限制 ```html ...

    Axure快速原型设计参考资料

    **5.1 解决中文输入法问题** - **解决方案**:配置Axure RP的相关设置,确保中文输入法能够在输入框中正常使用。 **5.2 超快速移动工作区** - **快捷键使用**:利用快捷键快速移动工作区,提高工作效率。 **5.3 ...

    文本框控件

    - **事件处理**:例如`OnKeyDown`、`OnKeyPress`和`OnKeyUp`事件用于处理用户输入时的按键行为,`OnChange`事件在文本内容改变时触发,可用于实时验证输入。 - **属性设置**:例如`MaxLength`属性限制输入的最大...

Global site tag (gtag.js) - Google Analytics