TypeIt JQuery Plugin：入力が完了したらカーソルを外す

Question

私はtypeit.jquery.jsプラグインを使用しています。段落のリストが順番に表示され始めたときです。すべてうまくいく、私が管理できなかったただ1つ：特定の行の入力が完了したら、cursorを削除する。

プラグインはattributecursor: falseですが、最初からcursorを取り除きます。私は入力した後に実行する関数callback: function(){}で同じ属性を使用しましたが、動作していないようです。

助けていただけたら幸いです！

$('.typeit-box3').typeIt({ 
 
    strings: 'First Paaragraph', 
 
    typeSpeed: 100, 
 
    autoStart: true, 
 
    callback: function() { 
 
    $('.typeit-box4').typeIt({ 
 
     strings: 'Second paragraph', 
 
     typeSpeed: 100, 
 
     autoStart: true, 
 
     callback: function(){ 
 
      $('.typeit-box5').typeIt({ 
 
       strings: 'Third Paragraph', 
 
       typeSpeed: 100, 
 
       autoStart: true 
 

 
       }) 
 
    } 
 
    
 
    }); 
 
    } 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"> 
 
</script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/4.2.3/typeit.min.js"></script> 
 
<ul> 
 
    <li class="list" focus-next> 
 
       <div class="typeit-box3"></div> 
 
      </li> 
 
      <li class="list" focus-next> 
 
       <div class="typeit-box4"></div> 
 
      </li> 
 
      <li class="list" focus-next> 
 
    
 
       <div class="typeit-box5" contenteditable></div> 
 
       
 
      </li> 
 
</ul>

Answer 1

テウタ -

これを助けて幸せ。 TypeItの各インスタンスのカーソルには「ti-cursor」クラスがあります。したがって、入力後に各カーソルを非表示にするには、各インスタンスのクラスをターゲットにして、表示をnoneに設定したクラスを追加するだけです。

カーソルにはインラインスタイルがあるため、！importantフラグを使用する必要があります。

ここに私の例を見てください。このような行に注意してください：

$('.typeit-box3').find('.ti-cursor').addClass('is-hidden');

困難のため申し訳ありませんが - 私はこれが役に立てば幸い！

$('.typeit-box3').typeIt({ 
 
    strings: 'First Paaragraph', 
 
    typeSpeed: 100, 
 
    autoStart: true, 
 
    callback: function() { 
 
    
 
    $('.typeit-box3').find('.ti-cursor').addClass('is-hidden'); 
 
    $('.typeit-box4').typeIt({ 
 
     strings: 'Second paragraph', 
 
     typeSpeed: 100, 
 
     autoStart: true, 
 
     callback: function() { 
 
     
 
     \t $('.typeit-box4').find('.ti-cursor').addClass('is-hidden'); 
 
     $('.typeit-box5').typeIt({ 
 
      strings: 'Third Paragraph', 
 
      typeSpeed: 100, 
 
      autoStart: true 
 

 
     }) 
 
     } 
 
    }); 
 
    } 
 
});

.is-hidden { 
 
    display: none !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeit/4.2.3/typeit.min.js"></script> 
 
<ul> 
 
    <li class="list" focus-next> 
 
    <div class="typeit-box3"></div> 
 
    </li> 
 
    <li class="list" focus-next> 
 
    <div class="typeit-box4"></div> 
 
    </li> 
 
    <li class="list" focus-next> 
 
    <div class="typeit-box5" contenteditable></div> 
 
    </li> 
 
</ul>