javascript - 渐进式输入占位符

Question

我很好奇如何在 CSS/Javascript 中实现渐进式/动态占位符，如下例所示。

附言。我知道我们需要在发布到 SO 之前展示某种工作/努力。但我有点搞不清楚要搜索什么来获取相关信息

Answer 1

设置<input placeholder=""属性使用 setTimeout或 setInterval用于动画循环。

一个更简单的版本只是使用 setTimeout 发送一堆 future 更新的垃圾邮件而不是动画循环，因为我认为它更简单 - 尽管这种方法无法扩展。

var finalPlaceholderText = "foo bar baz";
var input = document.getElementById( 'idOfTextBox' );    

var placeholderIndex = 0;
for( var i = 0; i < finalPlaceholderText.length; i++ ) {

    setTimeout( 
        function( length ) {
            input.placeholder = finalPlaceholderText.substring( 0, i );
        }
    , i * 500, i );
}

注意你需要传递 length ( i ) 作为参数进入 setTimeout回调，因为 JavaScript 的闭包将使用 for 之后的 last 值循环完成而不是 setTimeout 时使用的值每次都被调用。

使用 setTimeout -循环，它看起来像这样(注意缺少 for 循环):

var finalPlaceholderText = "foo bar baz";
var input = document.getElementById( 'idOfTextBox' );

function incrementPlaceholderText( i ) {
    input.placeholder = finalPlaceholderText.substring( 0, i );

    if( i < finalPlaceholderText.length ) {
        setTimeout( incrementPlaceholderText, 500, i + 1 );
    }
}

incrementPlaceholderText( 0 );

或更一般地(以支持多个输入元素和不同占位符文本的方式):

function incrementPlaceholderText( input, finalText, i ) {
    input.placeholder = finalText.substring( 0, i );

    if( i < finalText.length ) {
        setTimeout( incrementPlaceholderText, 500, input, finalText, i + 1 );
    }
}

incrementPlaceholderText( document.getElementById( 'idOfTextBox1' ), "foo bar baz", 0 );
incrementPlaceholderText( document.getElementById( 'idOfTextBox2' ), "foo bar baz qux", 0 );