简体   繁体   中英

Disable typewriter function if already typing on contenteditable

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

Try stopping the library when user inputs text

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

editor.addEventListener("input", stop);

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM