Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как сделать печатающийся текст в подсказке поля ввода в Тильда
Home
Pages
Listings
Pricing
Blog
Shop
FindAll’s Advanced Search Filter. Take It for a Spin.

Как сделать печатающийся текст в подсказке поля ввода в Тильда

1
Создали блок с формой и задали ему класс uc-print-input
2
Создали поле ввода в одну строку с именем findinput
3
Добавили код в блок Другое - Т123
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function() {
(function () { 
    function typeText(){
        setTimeout(function(){    
            const inputEl = document.querySelector('.uc-print-input input[name="findinput"]');
            if (inputEl!=undefined){
                const speedPrint = 100; 
                const pausePrint = 2000;
                const inpTxt = inputEl.getAttribute('placeholder');
                const arrTxt = inpTxt.split('');
                
                let partTxt=''; 
                let i=0; let timerPtint; let timerPause; let timerAgain;
                
                function startPrint(){ 
                    timerPause =  setTimeout(function(){ 
                        timerPtint = setInterval(printHolder, speedPrint)}, pausePrint)
                };  
                startPrint();
                
                function clearHolder(){ 
                    clearInterval(timerPtint);
                    clearTimeout(timerPause);
                    clearTimeout(timerAgain); 
                    i=0; 
                    partTxt='';
                };
                
                function printHolder() {
                    partTxt = partTxt + arrTxt[i]; i++;
                    inputEl.setAttribute('placeholder', partTxt );
                    
                    if (i == arrTxt.length){
                        clearHolder(); 
                        timerAgain =  setTimeout(function(){ 
                            startPrint();
                        }, pausePrint)};
                };
                
                inputEl.addEventListener('focus', function(event) {
                    clearHolder()
                });
                
                inputEl.addEventListener('focusout', function(event) {
                    setTimeout(function(){ 
                        inputEl.setAttribute('placeholder', inpTxt ) 
                    }, 10);
                    if ( !inputEl.value.length) startPrint();
                });
            };
        }, 2000);
    };
    typeText();
    
    window.addEventListener('resize', function(event) {
        clearTimeout(window.resizedFinished); 
        window.resizedFinished = setTimeout(function(){ 
            typeText()
        }, 1000);
    });
    
})();

});    
</script>
Made on
Tilda