H5如何解决composition事件导致的iOS原生输入法全键盘打字没有拼音的问题？

Question

比方说下面这段代码，主要是对输入内容做限制。

var cpLock;
$('#input').on('compositionstart', function(e) {
    cpLock = true；
});
$('#input').on('compositionend', function(e) {
    cpLock = false;
});
$('#input').on('input', function(e) {
    if (!cpLock) {
        if (e.target.value.length - 17 >=0) {
            var txt = $(e.target).val().substring(0, 16);
            $(e.target).val(txt);
            // 超过16字提示
        }
    }
});

经过测试在iOS的第三方输入法和原生九宫格键盘没有问题，但是切换到全键盘会出现打字的候选拼音消失的问题，请问怎么解决呢？

参考：
移动端输入框填坑系列（一） | AlloyTeam

Answer 1

我也遇到了这个问题，然后认真比对后发现，在触发合成事件时，有些输入法比如搜狗输入法IOS版是不会触发onChange事件的，但是ios自带的输入法无论是26键还是9宫格都会不断触发onChange事件。另外在Mac上，搜狗输入法也是会不断触发onChange事件的，可见是否触发onChange事件不是问题的关键。

下面是有问题的代码

const handleFormChange = (key: keyof Types.FormData, value: string) => {
    console.log(value === value.replace(/\s/g, ''), value, value.replace(/\s/g, ''));
    setForm(f => ({ ...f, [key]: value.replace(/\s/g, '') }));
};

通过上面的代码，在不同的环境中对比了一下value的值，在Mac中的搜狗输入法会不断触发onChange，然后依然能正确的合成汉字

在ios中使用搜狗输入法则只会在合成结束后触发一次

问题出在在ios系统中使用系统自带的输入法，它不经会在输入的过程中不断触发onChange，同时，观察一下替换之前的value值，它是以空格分割的，如果我们剔除掉空格，那就没办法正确的分词，最终导致输入异常

---

所以最简单的做法就是在触发onChange的时候，判断是否处于composition，如果是，则不做数据处理，直接setState

如果希望限制输入字符的最大长度，可以在 onCompositionEnd 事件中处理字符