Javascript 设置占位符文本的动画，使其键入多个短语

我正在使用来自的代码为搜索栏中的占位符文本设置动画。最终的结果是它看起来像是被键入的。现在它只键入一个短语，我想让它键入一个短语，然后替换为另一个短语，以此类推。任何帮助都将不胜感激

// your custom placeholder goes here!
var ph = "Search Website e.g. \"Dancing Cats\"",
    searchBar = $('#search'),
    // placeholder loop counter
    phCount = 0;

// function to return random number between
// with min/max range
function randDelay(min, max) {
    return Math.floor(Math.random() * (max-min+1)+min);
}

// function to print placeholder text in a 
// 'typing' effect
function printLetter(string, el) {
    // split string into character seperated array
    var arr = string.split(''),
        input = el,
        // store full placeholder
        origString = string,
        // get current placeholder value
        curPlace = $(input).attr("placeholder"),
        // append next letter to current placeholder
        placeholder = curPlace + arr[phCount];

    setTimeout(function(){
        // print placeholder text
        $(input).attr("placeholder", placeholder);
        // increase loop count
        phCount++;
        // run loop until placeholder is fully printed
        if (phCount < arr.length) {
            printLetter(origString, input);
        }
    // use random speed to simulate
    // 'human' typing
    }, randDelay(50, 90));
}  

// function to init animation
function placeholder() {
    $(searchBar).attr("placeholder", "");
    printLetter(ph, searchBar);
}

placeholder();
$('.submit').click(function(e){
    phCount = 0;
    e.preventDefault();
    placeholder();
});

//您的自定义占位符位于此处！
var ph=“搜索网站，例如“跳舞的猫”，
搜索栏=$（“#搜索”），
//占位符循环计数器
phCount=0；
//函数返回之间的随机数
//具有最小/最大范围
功能延迟（最小值、最大值）{
返回Math.floor（Math.random（）*（max-min+1）+min）；
}
//函数用于在文本中打印占位符文本
//“打字”效应
函数printLetter（字符串，el）{
//将字符串拆分为字符分隔的数组
var arr=string.split（“”），
输入=el，
//存储完整占位符
origString=字符串，
//获取当前占位符值
curPlace=$（输入）.attr（“占位符”），
//将下一个字母附加到当前占位符
占位符=curPlace+arr[phCount]；
setTimeout（函数（）{
//打印占位符文本
$（输入）.attr（“占位符”，占位符）；
//增加循环计数
phCount++；
//运行循环，直到占位符完全打印
如果（phCount

查看我的基于ES6承诺的解决方案。 希望这有帮助

//向给定元素占位符添加内容
功能添加位置保持架（添加，el）{
el.attr（'占位符'，el.attr（'占位符'）+toAdd）；
//符号“键入”之间的延迟
返回新承诺（resolve=>setTimeout（resolve，100））；
}
//清除给定元素中的占位符属性
函数clearPlaceholder（el）{
el.attr（“占位符”，“占位符”）；
}
//打印一个短语
函数printphase（短语，el）{
返回新承诺（解决=>{
//在键入下一个短语之前清除占位符
clearPlaceholder（el）；
让字母=短语。拆分（“”）；
//对于短语中的每个字母
字母。减少(
（承诺、信件、索引）=>承诺。然后（=>{
//在打印所有信件时解决承诺问题
如果（索引===letters.length-1）{
//开始下一个短语“键入”之前的延迟
设置超时（解析，1000）；
}
返回addToPlaceholder（字母，el）；
}),
承诺，决心
);
});
} 
//将给定的短语打印到元素
函数打印短语（短语，el）{
//每句话
//等待输入短语
//在开始下一步输入之前
短语。减少(
（承诺，短语）=>承诺。然后（=>printphase（短语，el）），
承诺，决心
);
}
//开始打字
函数运行（）{
让短语=[
“搜索网站，例如“跳舞的猫”，
“Lorem ipsum dolor sit amet”，
“献祭精英”，
“JS太奇怪了：）”
];
打印短语（短语，$（“#搜索”）；
}
run（）
.searchbar{
宽度：300px；
填充：10px；
}

箱子
查看我的基于ES6承诺的解决方案。
希望这有帮助


//向给定元素占位符添加内容
功能添加位置保持架（添加，el）{
el.attr（'占位符'，el.attr（'占位符'）+toAdd）；
//符号“键入”之间的延迟
返回新承诺（resolve=>setTimeout（resolve，100））；
}
//清除给定元素中的占位符属性
函数clearPlaceholder（el）{
el.attr（“占位符”，“占位符”）；
}
//打印一个短语
函数printphase（短语，el）{
返回新承诺（解决=>{
//在键入下一个短语之前清除占位符
clearPlaceholder（el）；
让字母=短语。拆分（“”）；
//对于短语中的每个字母
字母。减少(
（承诺、信件、索引）=>承诺。然后（=>{
//在打印所有信件时解决承诺问题
如果（索引===letters.length-1）{
//开始下一个短语“键入”之前的延迟
设置超时（解析，1000）；
}
返回addToPlaceholder（字母，el）；
}),
承诺，决心
);
});
} 
//将给定的短语打印到元素
函数打印短语（短语，el）{
//每句话
//等待输入短语
//在开始下一步输入之前
短语。减少(
（承诺，短语）=>承诺。然后（=>printphase（短语，el）），
承诺，决心
);
}
//开始打字
函数运行（）{
让短语=[
“搜索网站，例如“跳舞的猫”，
“Lorem ipsum dolor sit amet”，
“献祭精英”，
“JS太奇怪了：）”
];
打印短语（短语，$（“#搜索”）；
}
run（）
.searchbar{
宽度：300px；
填充：10px；
}

箱子
我编写的纯JS（无jQuery）与旧浏览器解决方案高度兼容：

使用innerHTML处理输入占位符或其他标记。解决方案无限循环定义的字符串

在JSfiddle上试试

HTML模板：


JS代码：
timeout\u var=null；
功能打字机（选择器\目标，文本\列表，占位符=false，i=0，文本\列表\ i=0，延迟\ ms=200）{
如果（！i）{
如果（占位符）{
document.querySelector（选择器\目标）。占位符=”；
}
否则{
文档查询选择器（选择器）
<p id="demo2"></p> 
<input type="text" id="demo">

timeout_var = null;

function typeWriter(selector_target, text_list, placeholder = false, i = 0, text_list_i=0, delay_ms=200) {
    if (!i) {
        if (placeholder) {
            document.querySelector(selector_target).placeholder = "";
        }
        else {
            document.querySelector(selector_target).innerHTML = "";
        }
    }
    txt = text_list[text_list_i];
    if (i < txt.length) {
        if (placeholder) {
            document.querySelector(selector_target).placeholder += txt.charAt(i);
        }
        else {
            document.querySelector(selector_target).innerHTML += txt.charAt(i);
        }
        i++;
        setTimeout(typeWriter, delay_ms, selector_target, text_list, placeholder, i, text_list_i);
    }
    else {
        text_list_i++;
        if (typeof text_list[text_list_i] === "undefined")  {
            // set "return;" for disabled infinite loop 
            setTimeout(typeWriter, (delay_ms*5), selector_target, text_list, placeholder);
        }
        else {
            i = 0;
            setTimeout(typeWriter, (delay_ms*3), selector_target, text_list, placeholder, i, text_list_i);
        }
    }
}

text_list = [
    "Lorem ipsum",
    "Tap here your search",
    "it's fine !"
];

return_value = typeWriter("#demo", text_list, true);