閉じる/開くモーダル時の文字カウントを更新する

Question

一部のコンテキスト：ラベルにテキストを追加できるページがあります。あなたがラベルをクリックするとモーダルが開き、textareasとタイプするとその下にcharカウンタがあります。

問題：最初のラベルにテキストを挿入すると、2番目のラベルモーダルを開くと、charカウンタの最後のカウントが登録されます。 textareaの内部をクリックするとリセットされます。

モーダルtwigそれは閉じるボタンを持つ単純なブートストラップテンプレートだとキャンセル/ inputでcountdown maxlength="80"と一番下のボタンを提出します。

これはカウンターJSです：実はmodalたびinputを集束させることによってそれを行う方法を見つけ

define(function() { 
    'use strict'; 

    return ['$compile', '$timeout', function CountdownDirective($compile, $timeout) { 
     return { 
      scope: {}, 
      link: function(scope, element, attrs) { 
       var limit = attrs.maxlength; 
       var span = $compile('<span class="countdown" ng-class="countdown.status">{{ charsLeft }}</span>')(scope); 

       scope.charsLeft = attrs.maxlength; 
       element.after(span); 

       function limitCheck(event) { 
        var length = element.val().length; 
        var code = event.keyCode; 

        if (length < limit) { 
         return; 
        } 

        switch (code) { 
         case 8: // allow delete 
         case 9: 
         case 17: 
         case 36: // and cursor keys 
         case 35: 
         case 37: 
         case 38: 
         case 39: 
         case 40: 
         case 46: 
         case 65: 
          return; 
        } 
       } 

       var updateCount = function() { 
        $timeout(function() { 
         var length = element.val().length; 
         var diff = limit - length; 
         var status = 'text-success'; 

         scope.charsLeft = diff || 0; 

         if (scope.charsLeft < attrs.maxlength * 0.3) { 
          status = 'text-warning'; 
         } 

         if (scope.charsLeft < attrs.maxlength * 0.1) { 
          status = 'text-danger'; 
         } 

         scope.countdown = { 
          status: status 
         }; 

         // Truncate 
         if (diff < 0) { 
          element.val(element.val().substr(0, limit)); 

          updateCount(); 
         } 
        }, 0); 
       }; 

       element.focus(updateCount).change(updateCount); 
       element.keyup(updateCount).change(updateCount); 
       element.keydown(limitCheck); 

       updateCount(); 
      } 
     }; 
    }]; 
}); 

Answer 1

が開きます。

modalモーダルクラスと form-control入力クラスであること

$(document).ready(function() { 
    $('.modal').on("shown.bs.modal", function() { 
    $('.form-control').focus(); 
}); 

。