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

Question

我正在使用 jsfiddle 中的这段代码来为我的搜索栏中的占位符文本添加动画效果。最终结果是它看起来像是在打字。现在它只输入一个短语，我想让它输入一个短语，然后用另一个短语替换，依此类推。任何帮助将不胜感激。

// 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();
});

Answer 1

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

// Add something to given element placeholder
function addToPlaceholder(toAdd, el) {
    el.attr('placeholder', el.attr('placeholder') + toAdd);
    // Delay between symbols "typing" 
    return new Promise(resolve => setTimeout(resolve, 100));
}

// Cleare placeholder attribute in given element
function clearPlaceholder(el) {
    el.attr("placeholder", "");
}

// Print one phrase
function printPhrase(phrase, el) {
    return new Promise(resolve => {
        // Clear placeholder before typing next phrase
        clearPlaceholder(el);
        let letters = phrase.split('');
        // For each letter in phrase
        letters.reduce(
            (promise, letter, index) => promise.then(_ => {
                // Resolve promise when all letters are typed
                if (index === letters.length - 1) {
                    // Delay before start next phrase "typing"
                    setTimeout(resolve, 1000);
                }
                return addToPlaceholder(letter, el);
            }),
            Promise.resolve()
        );
    });
} 

// Print given phrases to element
function printPhrases(phrases, el) {
    // For each phrase
    // wait for phrase to be typed
    // before start typing next
    phrases.reduce(
        (promise, phrase) => promise.then(_ => printPhrase(phrase, el)), 
        Promise.resolve()
    );
}

// Start typing
function run() {
    let phrases = [
        "Search Website e.g. \"Dancing Cats\"",
        "Lorem ipsum dolor sit amet",
        "Consectetur adipiscing elit",
        "JS is so strange :)"
    ];

    printPhrases(phrases, $('#search'));
}

run();

.searchbar {
    width: 300px;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Bin</title>
</head>
<body>
    <input type='text' id="search" class="searchbar" />
</body>
</html>

Answer 2

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

适用于输入占位符或其他带有内部HTML 的标签。解决方案无限循环定义的字符串。

在 JSfiddle 上试试

Get code and try it !

HTML 模板：

<p id="demo2"></p> 
<input type="text" id="demo">

JS代码：

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

此解决方案基于此 w3school page 改编了多个文本。

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

Animate placeholder text so it types MULTIPLE phrases

javascript

input

placeholder

在 JSfiddle 上试试

HTML 模板：

JS代码：