最近遇到一个问题，当手机输入法有联想功能时，输入或者删除会出现奇怪的现象，显示的文本会比实际输入的更多。
演示.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)
}
}
