Как сделать автозаполнение для ввода типа 1 буква за раз?

Question

var addy = "1234567812345678"

function fillAddy(i) {
    var addyKey = addy.substring(0, (addy.length - (addy.length - i) * -1)) 
    $('*[placeholder$="number"]').val(addyKey);
}

for (i = 1; i < addy.length; i++) {
    setTimeout(fillAddy(i), 2000);
}

Я пытаюсь сделать так, чтобы, когда он заполнял addy во вводе "[placeholder $ =" number "]", он заполнял его по одной букве за раз с задержкой в ​​2 секунды каждый раз, когда добавлял буква / цифра, по какой-то причине она заполняет все сразу.

Answer 1

Если вам нужно нарисовать буквы одну за другой, setTimeout () не будет работать для циклов. Вместо этого вам нужно написать рекурсивную (самопризывающую) функцию.

Пожалуйста, посмотрите на пример, надеюсь, это сработает для вас.

<div class="div"></div>


var $textOldContainer = $('.div');
var textNew = 'New text';
var textOld = 'old text';
var textOldLength = textOld.length;
var textOldCnt = textOldLength;
var secondTime = false;

function loopChar() {
  if( !secondTime ) {
    setTimeout(function() {
      if( textOldCnt <= textOldLength && textOldCnt >= 0 ) {
        loopChar();
        textOldCnt --;

        $textOldContainer.text( textOld.substring(0, textOldCnt - 1) );
      }

      if( textOldCnt == 0 ) {
        secondTime = true;
      }
    }, 10);
  } else {
    setTimeout(function() {
      if( textOldCnt <= textNew.length ) {
        loopChar();
        textOldCnt++;

        $textOldContainer.text( textNew.substring(0, textOldCnt - 1) );
      }
    }, 50);
  }
}

loopChar();

Вот пример Демо

Answer 2

Этого можно добиться с помощью CSS анимаций:

@keyframes animated-text{
  from {width: 0;}
  to {width: 472px;}
}

Просмотр запущенного jsfiddle . Обновите ширину в соответствии с вашими требованиями.