文本输入在Android版Chrome上的奇怪行为

Question

我正在开发一个小型应用程序，它由一组文本输入组成，每个应用程序只能容纳一个字符，并且所有输入的行为应相似。 因此，当输入填充有字符时，下一个输入应突出显示，其行为类似于输入的插入符号。 以相同的方式，当您清空输入时，其行为应类似于删除普通字符，并且应突出显示先前的输入。

您可以在这里看到我的作品： https : //codepen.io/Vitaozim/full/vqaRQY

这里的示例：

这是我的操作方法：

只要输入元素中的任何一个都聚焦，就会突出显示其整个内容，以确保其接收到的任何输入都会改变其整个值。
每当在任何输入元素中触发input事件时，都可能发生以下情况之一：
- 如果输入的新值不为空，则将关注下一个输入元素。 如果它收到的字符数超过1个，则代码将修剪字符串并仅保留最后一个字符。
- 否则，该值将以编程方式更改为一个空格，并且将前一个输入元素作为焦点。 该值将更改为一个空格，以便每当再次关注该输入时，都会突出显示某些内容，然后将其删除，从而触发“退格”条件。

问题是，它可以在以下浏览器上完美运行：

但这在Android版Chrome上存在问题。 我在许多不同的设备中对其进行了测试。 “退格模拟”错误和输入值未突出显示。

我进行了一些测试，我注意到如果在100ms的setTimeout之后设置选择，它将起作用。 就像我要覆盖浏览器的默认行为一样……但这仍然是一个很奇怪的行为，因为它仅在“退格”模拟中发生。 输入集中的任何其他情况都没有此错误。

Answer 1

这似乎是Chrome的常见问题。 您应该可以使用以下内容。

setTimeout(function() {}, 0);

其他StackOverflow答案表明这是Chrome / Chromium中的已知错误。