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

Question

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

问题：如果您在第一个标签中插入文本，当您打开第二个标签模式时，字符计数器已注册最后一个计数。仅当您在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输入类。