В input не выполняется атрибут maxlength="1" при вводе с виртуальной клавиатуры на JS

Всем доброго времени суток. Я тут новичек, как собственно говоря и новичек в верстке. Нашел в интернете виртуальную клавиатуру на js .
Прикрутил к своему коду. Работает, но не выполняется атрибут maxlength=“1”.
С аппаратной клавы все нормально. Что нужно и где подправить, чтобы заработало.
Код Edit fiddle - JSFiddle - Code Playground

Что ожидаешь видеть когда атрибут выполняется, и что видишь на самом деле?
Ожидаешь что фокус будет перепрыгивать в следующий инпут когда ввели 1 символ в предыдущий инпут?

Чтоб бы больше одного символа в инпуте (для меня в ячейке) не набиралось. Хотя предложенный вариант, “что фокус будет перепрыгивать в следующий инпут когда ввели 1 символ в предыдущий инпут”, то-же очень хорош. У меня таких строк из 5-8 инпутов
будет много. Но чтобы из строки в строку фокус не перескакивал. Спасибо.

Аттрибут maxlength не влияет на программно изменяемые значения (так же, как, например disabled не мешает программно изменить значение инпута). Аттрибут maxlength влияет только на возможности ввода пользователя. Если у тебя есть программное изменение значений инпута, нужно программно описывать логику ограничения ввода. Например если есть значение, то не менять на новое, или наоборот: использовать последнее введенное значение. При описании этой логики ограничения используй вот это событие HTMLElement: input event - Web APIs | MDN (событие change происходит только при потере фокуса, а тебе нужен момент именно изменения значения). Я не уверен на 100% что именно оно сработает для твоего случая (не проверял его работу с программным изменением) но это то направление в котором нужно копать ответ.