typed.js how to make text editable?

user_13039603 0
Viewed 32

I want to make the text as on the home page https://laracasts.com/
use for this library https://mattboldt.com/demos/typed-js/
Question
How do I make when I click on text the animation stops and I can write my text
here is my code

 <h1>
 <span  class="header-title-accent" id="typed" contenteditable="true" spellcheck="false" > Front-end Developer</span>
</h1>
<script>
              $('document').ready(function(){
                var typed = new Typed('#typed', {
                    strings: ['First ^1000 sentence.', 'Second sentence.'],
                    backSpeed:50,
                    typeSpeed:60,
                    cursorChar: '|||',                       
                });
            });
          </script>
css html jquery javascript
1 Answers

You could create 2 listeners on the input field to start() & stop() the Typed instance on blur & focus respectively. See the docs for more info: https://mattboldt.github.io/typed.js/docs/#typed

Example:

$('#typed').on('focus', function(e) {
  typed.stop();
});
   
// You may not need/want this one...
$('#typed').on('blur', function(e) {
  typed.start();
});

Codepen

user_15140490
Related