Android EditText InputFilter 和输入

最近遇到一个问题，当手机输入法有联想功能时，输入或者删除会出现奇怪的现象，显示的文本会比实际输入的更多。

演示.gif

做了一系列排查后，发现这一行出现问题。

editText.filters = arrayOf(inputFilter)

通过在 InputFilter 的 filter 方法断点可以看到输入的文本多了一些 span。原来输入法联想功能会携带一些 span 实现联想效果，但是代码里将 source 进行了 toString()，移除了这部分 span，导致出现了冲突。

找到问题后，解决办法也出来了。由于不同输入法联想功能携带的 span 可能不同，我们要保留原始的 span，不能直接返回 "xxx" 或者返回 source.toString()。

过滤 Emoji 场景的示例代码：

/**
* emoji 输入过滤
*/
private val emojiInputFilter = InputFilter { source, _, _, _, _, _ ->
    var text = source
    try {
        // 正则永远的神
        val regex = Regex(
            // 过滤 emoji https://github.com/zly394/EmojiRegex
            "|(?:[\\uD83C\\uDF00-\\uD83D\\uDDFF]|[\\uD83E\\uDD00-\\uD83E\\uDDFF]|[\\uD83D\\uDE00-\\uD83D\\uDE4F]|[\\uD83D\\uDE80-\\uD83D\\uDEFF]|[\\u2600-\\u26FF]\\uFE0F?|[\\u2700-\\u27BF]\\uFE0F?|\\u24C2\\uFE0F?|[\\uD83C\\uDDE6-\\uD83C\\uDDFF]{1,2}|[\\uD83C\\uDD70\\uD83C\\uDD71\\uD83C\\uDD7E\\uD83C\\uDD7F\\uD83C\\uDD8E\\uD83C\\uDD91-\\uD83C\\uDD9A]\\uFE0F?|[\\u0023\\u002A\\u0030-\\u0039]\\uFE0F?\\u20E3|[\\u2194-\\u2199\\u21A9-\\u21AA]\\uFE0F?|[\\u2B05-\\u2B07\\u2B1B\\u2B1C\\u2B50\\u2B55]\\uFE0F?|[\\u2934\\u2935]\\uFE0F?|[\\u3030\\u303D]\\uFE0F?|[\\u3297\\u3299]\\uFE0F?|[\\uD83C\\uDE01\\uD83C\\uDE02\\uD83C\\uDE1A\\uD83C\\uDE2F\\uD83C\\uDE32-\\uD83C\\uDE3A\\uD83C\\uDE50\\uD83C\\uDE51]\\uFE0F?|[\\u203C\\u2049]\\uFE0F?|[\\u25AA\\u25AB\\u25B6\\u25C0\\u25FB-\\u25FE]\\uFE0F?|[\\u00A9\\u00AE]\\uFE0F?|[\\u2122\\u2139]\\uFE0F?|\\uD83C\\uDC04\\uFE0F?|\\uD83C\\uDCCF\\uFE0F?|[\\u231A\\u231B\\u2328\\u23CF\\u23E9-\\u23F3\\u23F8-\\u23FA]\\uFE0F?)"
        )
        val sequence = regex.findAll(text)
        // 从后往前移除，防止影响下标
        for (index in sequence.count() - 1 downTo 0) {
            val element = sequence.elementAt(index)
            val range = element.range
            text = text.removeRange(range)
        }
        return@InputFilter text
    } catch (e: Exception) {
        e.printStackTrace()
        return@InputFilter text
    }
}

其他优化：

输入法联想功能在输入的时候，会有下划线。我们可以监听输入内容后，移除掉 UnderlineSpan。

image.png

editText.doAfterTextChanged {
    editText.text.getSpans<Any>().forEach {
        if (it is UnderlineSpan) editText.text.removeSpan(it)
    }
}