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

我正在尝试为一个输入框创建一个动画占位符，它看起来像是再次键入并删除了占位符（如中所示）

我尝试了一个字符串，但对数组做不到，我已经对我试图更改的部分进行了注释。我是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();

---

我希望这发生在输入标记的占位符中。您能帮我吗？

您可以使用

.setAttribute（）

和

.getAttribute（）

设置并附加到占位符文本：

typingEffect（）：

删除效果（）：

见下例：

const words=[“注入”，
“断开的身份验证”，
“敏感数据泄露”，
“XML外部实体（XXE）”，
“断开的访问控制”，
“安全配置错误”，
“跨站点脚本（XSS）”，
“不安全的反序列化”，
“使用具有已知漏洞的组件”，
“日志记录和监视不足”
];
设i=0；
让定时器；
函数typingEffect（）{
设word=words[i]。拆分（“”）；
var loopTyping=function（）{
如果（字长>0）{
让elem=document.getElementById（'typer'）；
elem.setAttribute（'placeholder'，elem.getAttribute（'placeholder'）+word.shift（）；
}否则{
删除效应（）；
返回false；
};
定时器=设置超时（循环输入，200）；
};
loopTyping（）；
};
函数删除效果（）{
设word=words[i]。拆分（“”）；
var loopDeleting=函数（）{
如果（字长>0）{
word.pop（）；
document.getElementById（'typer'）.setAttribute（'placeholder'，word.join（“”）；
}否则{
if（words.length>（i+1））{
i++；
}否则{
i=0；
};
typingEffect（）；
返回false；
};
定时器=设置超时（循环删除，100）；
};
循环删除（）；
};
typingEffect（）
#打字机{
字体大小：30px；
}
请解释您当前的代码是如何失败的，以及您试图修复的内容。我已经注释掉了我实际尝试的内容。
let elem = document.getElementById('typer');
elem.setAttribute('placeholder', elem.getAttribute('placeholder') + word.shift());

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