Disable typewriter function if already typing on contenteditable

user_16303347 0
Viewed 47

I'm using the typewriter.js with contenteditable="true". However my issue is that, when i type in the input, my text will expand with the typerwriter placeholder. How can i disable the typewriter when I've input a text in the contenteditable ? This is my code

<div id="quote__text" contenteditable="true">


var app = document.getElementById('quote__text');
var typewriter = new Typewriter(app, {
    loop: true
});

typewriter.typeString('TYPE HERE TO SET GOAL')
    .pauseFor(2500)
    .deleteAll()
    .typeString('GOAL 1')
    .pauseFor(2500)
    .deleteChars(7)
    .typeString('GOAL 2')
    .pauseFor(2500)
    .start();
css html jquery
1 Answers

Try stopping the library when user inputs text

const editor = document.getElementById("quote__text");

editor.addEventListener("input", stop);

function stop(e) {
    typewriter.stop()
}
user_87237480
Related