中文输入截断问题

makeFoxPlay 发布于2019-08-20 16:10 / 607人阅读

摘要：在源码中寻找答案文档中有如下一段话对于需要输入法编辑器的语言中文日文韩文等，要注意的是，在字母组合窗口输入时并不会更新。

前几天一个项目中需要对一个输入框输入进行限制，不能输入数字，可以输入汉字字母其他字符等。
心想这个不难，便随手写下了如下代码：

    const inputEle = document.querySelector("#input")
    const idReg = /[0-9]/g
    inputEle.addEventListener("input", function(e){
        let value = e.target.value

        value = value.replace(idReg, "")
        inputEle.value = value
    })

但是等提到测试环境后，结果被测试同学发现在中文输入法下回出现如下问题：

IME问题

最终寻找一番后发现，原来这是IME问题，即中文输入时出现在输入框上方的带候选但还未选择的状态，其实这个在韩文日文等非字母文字中都会出现这个问题。
那如何解决呢。

用搜索引擎一搜索，便看到了有人说可以通过compositionstart和compositionend判断是否处于IME状态。但是这个两个函数从来没见过，敢用吗？兼容性如何？

于是便到caniuse和MDN上看看。

caniuse上根本就没没有这个函数的兼容性报告，MDN上虽然说可以用，但是心里还是没底。
这时想到vue文档中好像提过关于中文输入，于是马上就翻了翻vue的文档。

在vue源码中寻找答案

vue文档中有如下一段话

对于需要输入法编辑器的语言（中文、日文、韩文等），要注意的是，在 IME 字母组合窗口输入时 v-model 并不会更新。如果你想在此期间满足更新需求，请使用 input 事件。

说明vue解决了这个问题，那vue是怎么实现的，是使用compositionstart和compositionend，还是其他方法？于是带着疑问道vue的源码中寻找答案。

在关于v-model相关代码中很快就看到了这行代码

  if (needCompositionGuard) {
    code = `if($event.target.composing)return;${code}`
  }

但是很明显composing不是event.target的标准属性，那是从哪里来的呢，于是全局搜索了composing，很快在这里找到了答案。

    function onCompositionStart (e) {
      e.target.composing = true
    }
    
    function onCompositionEnd (e) {
      e.target.composing = false
      trigger(e.target, "input")
    }

而这两个函数是在哪里被调用的呢？就在当前文件内一搜索就找到了。

  el.addEventListener("compositionstart", onCompositionStart)
  el.addEventListener("compositionend", onCompositionEnd)

哈哈，原来就是前面所说的compositionstart和compositionend方法。

结论

既然vue中使用的就是compositionstart和compositionend方法，并且经过这么多人检验，肯定是没问题的，可以在项目中放心的使用。

虽然一开始就找到了正确的答案，但是后面的求证才是最有价值的。

服务器托管私有云输入中文中文输入禁止输入中文禁止中文输入

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

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

实时监控用户输入--中文输入解决方案

摘要：需求对用户的输入进行实时监控，当用户输入的内容超出规定的字符长度时对用户输入进行截断并给予警告提示。实验发现，这种处理方式对于英文字符或者数字输入时效果完美，但是在输入中文时有。用这个事件，我们可以实现中文输入法截断的问题了。需求：对用户的输入进行实时监控，当用户输入的内容超出规定的字符长度时对用户输入进行截断并给予警告提示。看到这一需求，第一想法就是对所需实时监控的input输入...

Jingbin_ 2019-08-20 12:20 评论0 收藏0
textarea,input输入字符数限制。

摘要：但是有时候我们需要实现文本框中输入中文长度是或是，其他非中文输入是。因为中文输入法的在非正式输入时，对于我们这个算法，会出现剩余字符数为负值的情况。 textarea,input输入字符数限制。　　在做开发时，有一种需求是对输入框(input,textarea)的字数做限制。如果按照JS的规定，字符串里所有的字符，长度都是1。但是有时候我们需要实现文本框中输入中文长度是2（或是３），...

figofuture 2019-08-23 10:47 评论0 收藏0
中文NER的那些事儿5. Transformer相对位置编码&TENER代码实现

摘要：如果截断长度为，位置编码的，下图是的在中给出了一种新的相对位置编码，几乎是和经典的绝对位置编码一一对应。只是把绝对位置编码替换成相对位置编码，在两个任务上都有的效果提升，最终效果也基本和一致。这一章我们主要关注transformer在序列标注任务上的应用，作为2017年后最热的模型结构之一，在序列标注任务上原生transformer的表现并不尽如人意，效果比bilstm还要差不少，这背后有哪...

tylin 2021-11-18 10:07 评论0 收藏0
Emoji的编码以及常见问题处理

摘要：题外话补充一点是一种字符编码方法，它是由国际组织设计，可以容纳全世界所有语言文字的编码方案。带有的字符串截取在这类编程语言中一个中文字符的长度为，但是对大部分的并非全部取长度则是。我在虎嗅上看过一篇关于Emoji的趣闻, 特别有意思, 在这里跟大家分享一下。里面提到了Emoji是怎么诞生的。 1999年前后，日本一个名叫栗田穰崇的年轻人，和许多直男一样，给女友发的短信经常会被误解。...

wemall 2019-07-31 10:54 评论0 收藏0
MySQL字符数据类型char与varchar的区别

摘要：但有人会说，的英文字符只需要个字节表示，并不占用个字节，在存字符的情况下是不是可以更大呢。也是以这种方式来确保行最大限制数据行只要出现一个字符如英文字母数字，就永远达不到，数据行全中文则刚好满。数据类型差不多是接触mysql一开始就了解的内容，最近遇到几个现象如varchar自动转mediumtext，blob存储性能的问题，不得不回头明确一下关于MySQL常用数据类型的选择。 my...

nodejh 2019-07-31 16:12 评论0 收藏0