Посимвольный ввод текста
В этой демонстрации мы создадим JavaScript-компонент, который имитирует посимвольный ввод текста в поле ввода. При реализации компонента мы используем рекурсивную функцию, которая будет вызывать себя, пока не будет введен весь текст.
Для начала создадим произвольное поле ввода для которого создадим обработчик события ввода.
Создадим файл script.js и подключим его в index.html.
Перейдём в файл script.js и начнём писать функциональность компонента.
Задача: написать класс TypeWriter, который будет печатать текст в элементе inputElement по одной букве за заданное время.
Для начала создадим класс TypeWriter.
Добавим конструктор, который принимает объект с настройками: элемент для ввода текста и задержку между вводом символов. По умолчанию задержка 100ms.
В конструкторе присвоим свойствам Typewriter значения из входных параметров:
this.inputElement — элемент ввода, в котором будем происходить автоматический посимвольный ввод текста;this.delay — задержка между нажатиями клавиш;
Далее создадим публичный метод typing, который принимает в качестве параметра текст, который будет набираться в поле ввода this.inputElement.
Если в инпуте уже был текст, то его нужно очистить с помощью this.inputElement.value = '' и добавить новый текст, который пока запомним в this.text.
Осталось создать метод, который будет вводить текст посимвольно. Создадим приватный метод #typeNextCharacter, который будет заниматься посимвольным вводом, а также будет запускаться сразу как только передали text в метод typing.
В JavaScript приватные методы можно создать с помощью # перед именем метода. Приватный метод будет доступен только внутри класса.
В процессе посимвольного ввода мы будем брать отдельные символы строки и добавлять их к значению в поле ввода.
Для этого создадим свойство this.currentIndex, в котором будем хранить номер текущего символа. При вызове функции typing будем задавать нулевое значение для this.currentIndex.
Внутри метода #typeNextCharacter() добавляем проверку, что номер текущего символа меньше, чем длина переданного слова.
При каждом вызове метода #typeNextCharacter() мы берём из строки this.text символ по его текущему номеру, добавляем этот символ к текущему значению в поле ввода и записываем в поле ввода обновлённое значение.
Так работает посимвольный ввод.
После обновления значения в поле ввода увеличиваем номер текущего символа на единицу.
А после увеличения this.currentIndex вызываем метод #typeNextCharacter().
Заметьте, метод #typeNextCharacter() вызывает сам себя. Это и называется рекурсия. При каждом вызове увеличивается this.currentIndex, и в тот момент, когда условие перестанет срабатывать, рекурсия остановится.
Чтобы добавить задержку при вводе, обернём рекурсивный вызов #typeNextCharacter() в функцию setTimeout, которая принимает два аргумента: функцию и время в миллисекундах, через которое нужно вызвать эту функцию.
Значение задержки возьмём из this.delay.
Осталось проверить работу программы. Для начала найдём необходимый инпут.
Создадим экземпляр класса Typewriter и передадим ему инпут и задержку между выводом символов в 40ms.
Вызовем метод typing() с нужным нам текстом.
На этом демонстрация завершена. Можете поэкспериментировать с параметрами компонента, и вызывать метод typing() с разными значениями.
