文本輸入在Android版Chrome上的奇怪行為

Question

我正在開發一個小型應用程序，它由一組文本輸入組成，每個應用程序只能容納一個字符，並且所有輸入的行為應相似。 因此，當輸入填充有字符時，下一個輸入應突出顯示，其行為類似於輸入的插入符號。 以相同的方式，當您清空輸入時，其行為應類似於刪除普通字符，並且應突出顯示先前的輸入。

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

這里的示例：

這是我的操作方法：

只要輸入元素中的任何一個都聚焦，就會突出顯示其整個內容，以確保其接收到的任何輸入都會改變其整個值。
每當在任何輸入元素中觸發input事件時，都可能發生以下情況之一：
- 如果輸入的新值不為空，則將關注下一個輸入元素。 如果它收到的字符數超過1個，則代碼將修剪字符串並僅保留最后一個字符。
- 否則，該值將以編程方式更改為一個空格，並且將前一個輸入元素作為焦點。 該值將更改為一個空格，以便每當再次關注該輸入時，都會突出顯示某些內容，然后將其刪除，從而觸發“退格”條件。

問題是，它可以在以下瀏覽器上完美運行：

但這在Android版Chrome上存在問題。 我在許多不同的設備中對其進行了測試。 “退格模擬”錯誤和輸入值未突出顯示。

我進行了一些測試，我注意到如果在100ms的setTimeout之后設置選擇，它將起作用。 就像我要覆蓋瀏覽器的默認行為一樣……但這仍然是一個很奇怪的行為，因為它僅在“退格”模擬中發生。 輸入集中的任何其他情況都沒有此錯誤。

Answer 1

這似乎是Chrome的常見問題。 您應該可以使用以下內容。

setTimeout(function() {}, 0);

其他StackOverflow答案表明這是Chrome / Chromium中的已知錯誤。