关闭/打开模式时更新字符数

Question

一些上下文：我有一个页面，您可以在其中向标签添加文本； 如果单击标签，将打开一个模式框，并且您要键入textareas ，在该textareas下方有一个字符计数器。

问题：如果在第一个标签中插入文本，则在打开第二个标签模态时，char计数器将注册最后一个计数。 仅当您在文textarea单击时，它才会重置。

该模式的twig它与一个关闭按钮，一个简单的引导模板，并取消/与底部的提交按钮countdown maxlength="80"的input 。

这是计数器js：

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打开时集中input来做到这一点：

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

作为modal的模态类并form-control输入类。