如何一次自動填充輸入類型 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);
}

我正在努力做到這一點，因此當它在輸入“[placeholder$="number"]”中填充 addy 時，它一次填充一個字母，每次添加一個字母/數字時延遲 2 秒，例如出於某種原因，它一次將其全部填滿。

Answer 1

您可以通過使用 CSS 動畫來實現：

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

查看正在運行的jsfiddle 。 根據您的要求更新寬度。

Answer 2

如果您需要一個一個地繪制字母， setTimeout() 將不適用於循環。 相反，您需要編寫遞歸（自調用）function。

請看一下這個例子，希望這對你有用。

<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();

這是演示演示