Javascript 渐进式输入占位符

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

---

另外，我知道在发布到SO之前，我们需要展示一些工作/努力。但是我有点搞不清楚搜索什么来获取相关信息

设置

设置
希望这个片段会有用。增加了澄清意见


//创建一个变量。这将用于创建子字符串
var initialChar=0；
//获取元素和占位符
让getElement=document.getElementById（'inputElem'）；
让getPlaceHolderText=getElement.getAttribute（'placeholder'）；
//创建IIFE，只要占位符不存在，就会调用它
//完全创造
（函数setPlaceholder（）{
//设置超时功能，一次输入一个文本
让clearNow=setTimeout（函数（）{
//增加计数
initialChar++；
//创建子字符串并将此值设置为占位符
让getChar=getPlaceHolderText.substring（0，initialChar）；
getElement.setAttribute（'placeholder'，getChar+'|'）
//当字符串的变量值和长度
//如果相等，则表示已创建所有占位符文本
//如果不相等，则向占位符添加下一个字符
if（initialChar！==getPlaceHolderText.length）{
//呼唤生命
setPlaceholder（）
}否则{
//相等以便删除管道（创建光标效果的管道）
getElement.setAttribute（'placeholder'，getElement.getAttribute（'placeholder'）。切片（0，-1））；
clearTimeout（clearNow）；
}
}，Math.ceil（Math.random（）*150））//任意随机数
}（））
希望这段代码会有用。增加了澄清意见


//创建一个变量。这将用于创建子字符串
var initialChar=0；
//获取元素和占位符
让getElement=document.getElementById（'inputElem'）；
让getPlaceHolderText=getElement.getAttribute（'placeholder'）；
//创建IIFE，只要占位符不存在，就会调用它
//完全创造
（函数setPlaceholder（）{
//设置超时功能，一次输入一个文本
让clearNow=setTimeout（函数（）{
//增加计数
initialChar++；
//创建子字符串并将此值设置为占位符
让getChar=getPlaceHolderText.substring（0，initialChar）；
getElement.setAttribute（'placeholder'，getChar+'|'）
//当字符串的变量值和长度
//如果相等，则表示已创建所有占位符文本
//如果不相等，则向占位符添加下一个字符
if（initialChar！==getPlaceHolderText.length）{
//呼唤生命
setPlaceholder（）
}否则{
//相等以便删除管道（创建光标效果的管道）
getElement.setAttribute（'placeholder'，getElement.getAttribute（'placeholder'）。切片（0，-1））；
clearTimeout（clearNow）；
}
}，Math.ceil（Math.random（）*150））//任意随机数
}（））
在检查了源代码后，发现已经为此构建了一个很棒的库

在检查源代码后，我们发现已经为此构建了一个非常棒的库

您可以使用以下功能：


var finalPlaceholderText=“foo bar bazaazz”；
var input=document.getElementById（'idOfTextBox'）；
var len=finalPlaceholderText.length；
var-timerID；
var计数器=0；
如果（计数器您可以使用函数：


var finalPlaceholderText=“foo bar bazaazz”；
var input=document.getElementById（'idOfTextBox'）；
var len=finalPlaceholderText.length；
var-timerID；
var计数器=0；
如果（计数器应该是
input.placeholder
@SachiTekina Good catch！我没有想：）我编辑了我的帖子。它应该是
input.placeholder
@SachiTekina Good catch！我没有想：）我编辑了我的帖子。
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 );
}

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