在文字輸入中自動輸入

Question

我想讓在輸入type = text元素內自動出現文本。

我想完成的工作是，將不同類型的文本存儲在數組中，並且每隔5秒鍾左右，JavaScript將文本“鍵入”到該字段中。 然后，當我專注於該字段（通過鍵盤在其中輸入文本）時，它也會停止自動鍵入並顯示一個空的輸入元素。

有人知道該怎么做嗎？ 我是一個后端程序員，但是需要做一些前端編程，而又沒有時間充分學習Javascript。 目前，我只完全了解PHP，但是也會將我的知識擴展到CSS，HTML和JavaScript。

希望有人能夠幫助我:)

編輯：這是我想出的解決方案，並且可以工作。 輸入字段的ID為：searchBar。 該代碼不是很優雅，但我仍在學習:)感謝您的回答。 這對我幫助很大。

var searchBar = document.getElementById('searchBar');

var keywords = ['Auto typed text number 1',
               'This is number 2 auto typed',
               'Yet another auto typed line',
               'The last line before it loops again'];

var index = 0;
var arrCounter = 0;
var focus = false;
var timer1, timer2;

function resetBox() {
    searchBar.value = '';
    index = 0;
    autoType();
}

var autoType = function() {

    if (focus) {

        return;
    }

    if (index <= keywords[arrCounter].length) {
        searchBar.value = keywords[arrCounter].substr(0, index++);
        timer1 = setTimeout("autoType()", 50);
    } else {

        arrCounter++;
        if(arrCounter === keywords.length){
            arrCounter = 0;
        }

        timer2 = setTimeout(resetBox, 5000);
    }
};

autoType();
$("#searchBar").on("focus", function(){
    focus = true;
    searchBar.value = '';
    clearTimeout(timer1);
    clearTimeout(timer2);

}).on("blur", function(){
    setTimeout(function() {
        focus = false;
        resetBox();
    }, 1000);
});

Answer 1

嘗試這樣：

html

<input id='demo_input' size='100'/>

javascript：

var demo_input = document.getElementById('demo_input');

var type_this = "try this example";
var index = 0;

window.next_letter = function() {
    if (index <= type_this.length) {
        demo_input.value = type_this.substr(0, index++);
        setTimeout("next_letter()", 50);
    }
}

next_letter();