在输入框中创建占位符的打字和删除效果动画

Question

I'm trying to create an animated placeholder for an input box which looks like the placeholder is typed and deleted again (like in https://www.squarespace.com/templates ).

I tried for a single string but failed to do so for an array, I have commented the part I tried to change. I am new to Javascript:

const words = [
    "Injection",
    "Broken Authentication",
    "Sensitive Data Exposure",
    "XML External Entities (XXE)",
    "Broken Access Control",
    "Security Misconfiguration",
    "Cross-Site Scripting (XSS)",
    "Insecure Deserialization",
    "Using Components with Known Vulnerabilities",
    "Insufficient Logging&Monitoring"
];
let i = 0;
let timer;

function typingEffect() {
    let word = words[i].split("");
    var loopTyping = function () {
        if (word.length > 0) {
            document.getElementById('word').innerHTML += word.shift();
        } else {
            deletingEffect();
            return false;
        };
        timer = setTimeout(loopTyping, 200);
    };
    loopTyping();
};

function deletingEffect() {
    let word = words[i].split("");
    var loopDeleting = function () {
        if (word.length > 0) {
            word.pop();
            // document.getElementById('word').style.font = inherit;
            document.getElementById('word').innerHTML = word.join("");
        } else {
            if (words.length > (i + 1)) {
                i++;
            } else {
                i = 0;
            };
            typingEffect();
            return false;
        };
        timer = setTimeout(loopDeleting, 100);
    };
    loopDeleting();
};

typingEffect();

I wanted this to happen in the placeholder of the input tag. Can you help me please?

Answer 1

You can use .setAttribute() and .getAttribute() to set and append to the placeholder text:

typingEffect():

let elem = document.getElementById('typer');
elem.setAttribute('placeholder', elem.getAttribute('placeholder') + word.shift());

deletingEffect():

document.getElementById('typer').setAttribute('placeholder', word.join(""));

See example below:

 const words = ["Injection", "Broken Authentication", "Sensitive Data Exposure", "XML External Entities (XXE)", "Broken Access Control", "Security Misconfiguration", "Cross-Site Scripting (XSS)", "Insecure Deserialization", "Using Components with Known Vulnerabilities", "Insufficient Logging&Monitoring" ]; let i = 0; let timer; function typingEffect() { let word = words[i].split(""); var loopTyping = function() { if (word.length > 0) { let elem = document.getElementById('typer'); elem.setAttribute('placeholder', elem.getAttribute('placeholder') + word.shift()); } else { deletingEffect(); return false; }; timer = setTimeout(loopTyping, 200); }; loopTyping(); }; function deletingEffect() { let word = words[i].split(""); var loopDeleting = function() { if (word.length > 0) { word.pop(); document.getElementById('typer').setAttribute('placeholder', word.join("")); } else { if (words.length > (i + 1)) { i++; } else { i = 0; }; typingEffect(); return false; }; timer = setTimeout(loopDeleting, 100); }; loopDeleting(); }; typingEffect();

 #typer { font-size: 30px; }

 <input type="text" id="typer" placeholder=""></div>