自动输入内部文本输入

时间:2014-03-28 10:27:34

标签: javascript jquery html css

我想在输入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);
});

1 个答案:

答案 0 :(得分:2)

试试这样:

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