Question

某些背景信息：我有一个页面，您可以在其中添加文字到标签;如果你单击标签打开一个模态，你有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

每次input打开时，实际上都会通过关注modal来了解如何执行此操作：

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

是modal模态类，form-control是输入类。

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

1 个答案: