阻止中文输入法输入拼音的时候触发input事件

Ali_ 发布于2019-08-23 13:07 / 2224人阅读

摘要：当文本段落的组成完成或取消时事件将被触发具有特殊字符的触发需要一系列键和其他输入如语音识别或移动中的字词建议。

阻止中文输入法输入拼音的时候触发input事件 前言

最近看element-ui源码的时候看到el-input发现的。这个少见的事件。

compositionstart、compositionend事件（MDN解释)

compositionstart事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。
当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。

/**
 * @param {Element} elem input元素
 * @param {Function} callback input事件绑定的回调
 */
function inputEvent(elem, callback) {
    let isOnComposition = false;
    elem.addEventListener("compositionstart", function(event) {
        isOnComposition = true;
    })
    elem.addEventListener("compositionend", function(event) {
        isOnComposition = false;
        const val = event.target.value;
        handleInput(val);
    })
    elem.addEventListener("input", function(event) {
        const val = event.target.value;
        handleInput(val);
    })
    function handleInput(val) {
        if (isOnComposition) return;
        callback(val);
    }
}

window.onload = function() {
    const input = document.getElementById("input");
    inputEvent(input, function(val) {
        console.log(val);
    })
}

云服务器 GPU云服务器 js 输入时触发事件阻止输入手机qq拼音输入法拼音输入法 c语言

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99225.html

从0开始构建自己的前端知识体系-JS-事件-键盘事件总结

摘要：在探寻的过程中发现自己对键盘输入事件的理解还并不到位，以至于有一些代码看得云里雾里，赶紧查阅资料写写总结一下下文所说只在与里做了探究。短按触发顺序长按触发顺序循环事件阻止冒泡这类事件都会冒泡，阻止按照常规调用接口就可以阻止冒泡了。前言最近因一个需求在element-ui的Select组件文档内找不到对应的示例，也就是filter-method方法的具体使用样例，尝试几次之后也使用了...

Anonymous1 2019-08-22 15:55 评论0 收藏0
解决oninput事件在中文输入法下会取得拼音的值的问题

摘要：简单点描述如下在输入中文或者语音等需要等待一连串的输入的操作之前，事件会触发。在输入中文或者语音等完毕或取消时，事件会触发。在一段中文输入完毕后却并没有在控制台输出任何数据。测试后发现事件是在事件之后触发的。在做搜索等功能时，很多时候我们需要实时获取用户输入的值，而常常会得到类似 wm 这样的拼音。为了解决这个问题，我在网上搜索了下相关问题，发现了两个陌生的事件：compositio...

gclove 2019-08-01 18:16 评论0 收藏0
解决oninput事件在中文输入法下会取得拼音的值的问题

摘要：简单点描述如下在输入中文或者语音等需要等待一连串的输入的操作之前，事件会触发。在输入中文或者语音等完毕或取消时，事件会触发。在一段中文输入完毕后却并没有在控制台输出任何数据。测试后发现事件是在事件之后触发的。在做搜索等功能时，很多时候我们需要实时获取用户输入的值，而常常会得到类似 wm 这样的拼音。为了解决这个问题，我在网上搜索了下相关问题，发现了两个陌生的事件：compositio...

wangbjun 2019-08-22 11:21 评论0 收藏0
说一说限制字数的输入框踩的坑

摘要：所以最后牺牲了下用户体验，找到了一个折中的方式输入框失去焦点时即，或者用户输入回车键时才进行内容长度的检测。当然如果发现输入框内容超过限制，要将光标停留在输入框内，方便用户进行修改。前言最近产品需要做不少输入框，产品想要的交互效果是：用户可以输入中英文，随着用户输入能实时显示已经输入的字符个数，当超过数量限制时输入框边框变红，同时给用户提示信息。这交互听起来没啥问题，技术实现上似...

luck 2019-08-21 14:16 评论0 收藏0