我正在开发一个包含一组文本输入的小型应用程序，每个输入只适合一个字符，所有输入一起应该表现得像一个。因此，当一个输入被一个字符填充时，下一个输入应该被突出显示，就像输入的插入符号一样。同样，当你清空一个输入时，它应该表现得像一个普通的字符删除，并且应该突出显示之前的输入。
你可以在这里看到我的工作：https ://codepen.io/Vitaozim/full/vqaRQY
样品在这里：
这是我的做法：
- 每当输入元素中的任何一个被聚焦时，它的整个内容都会被突出显示，以确保它接收到的任何输入都会改变它的整个值。
每当
input在任何输入元素中触发事件时，都可能发生以下情况之一：- 如果输入的新值不为空，则聚焦下一个输入元素。如果它接收到一个超过 1 个字符的值，代码将修剪字符串并只留下最后一个字符。
- 否则，该值会以编程方式更改为一个空格，并聚焦前一个输入元素。该值更改为一个空格，这样每当该输入再次聚焦时，就会有一些内容被突出显示然后删除，从而触发“退格”条件。
问题是，它在以下浏览器上完美运行：
- 适用于 Mac 和 iPhone 的 Chrome
- 适用于 Mac 和 iPhone 的 Safari
- 适用于 Mac、iPhone 和 Android 的 Firefox
但它在 Android 版 Chrome 上存在问题。我在许多不同的设备上对其进行了测试。“退格模拟”错误和输入值未在焦点上突出显示。
我做了一些测试，我注意到如果我在setTimeout100 毫秒后设置选择，它会起作用。就像我正在覆盖浏览器的默认行为......但这仍然是一个非常奇怪的行为，因为它只发生在“退格”模拟中。输入集中的任何其他情况都没有此错误。