Question

我正在研究一个CSS动画类型的东西，需要在HTML的文本框中显示文本，就好像有人在输入它但没有人实际放入任何文本输入。到目前为止我有这个：

<html>
    <head><style>
    input, input:focus {
        border:none;
    }
    input {
        animation: blink-empty 1s infinite;
        border-left: transparent solid 1px;
        margin:5px 
    }
    @keyframes blink-empty {
        50% {border-left: 1px solid #333;}
    }
    </style></head>
    <body>
        <input type="text" value="" id="Box1"/>
    <script type="text/javascript">
    window.onload = function() {
        document.getElementById("Box1").focus();
        document.getElementById("Box1").value= ("Text in the textbox");
    };
    </script>
    </body>
</html>

我希望逐个字符地显示“文本框中的文本”值，就像用户输入它一样，每个字符之间有一段时间。所以我的问题是，有人知道如何在js中进行计时和附加列表吗？谢谢！

Answer 1

您可以使用setTimeout并排队将字符写入文本框。

window.onload = function() {
    var box = document.getElementById("Box1"),
        text = "Text in the textbox";

    document.getElementById("Box1").focus();

    for (var i = 0, l = text.length; i < l; i++) {
        setTimeout(function(i) {
            box.value = text.substring(0, i + 1);
        }.bind(this, i), i * 200);
    }
};

JSFiddle

Answer 2

尝试使用setInterval javascript函数定期执行操作。

http://www.w3schools.com/js/js_timing.asp

e.g。

setInterval(addNextLetterToTextBox, 200);

试一试，如果您有更具体的问题，请告诉我们。

这是一个有效的例子：

document.getElementById("box1").focus();
setTimeout(addNextLetterToTextBox, 200);
var text = 'hello world';
var i = 0;
function addNextLetterToTextBox(){
    if (i < text.length){
       document.getElementById("box1").value += text[i];
        i+= 1;
       setTimeout(addNextLetterToTextBox, 200);
    }
}

Answer 3

没有'自动'方式这样做，你只需要用setInterval强制它并将字母一次放在元素中。

如何逐个字符地显示文本框中的文本？

3 个答案: