Bootstrap maxlength 在模态对话框中不起作用答案

【问题标题】：Bootstrap maxlength doesn't work in modal dialogBootstrap maxlength 在模态对话框中不起作用
【发布时间】：2017-03-10 16:40:39
【问题描述】：

我正在使用 Bootstrap Maxlength 插件在用户插入文本时显示字段的最大长度。它适用于页面的输入字段和文本区域。问题是当输入或文本区域字段在模式对话框中时它不起作用。

我有这个 javascript 代码：

$(document).ready(function () {
  $('input.max-length-field').maxlength({
    limitReachedClass: "label label-danger",
    alwaysShow: true
  });
  $('textarea.max-length-field').maxlength({
    limitReachedClass: "label label-danger",
    alwaysShow: true
  });
});

因此，所有具有“max-length-field”类的输入和文本区域都应该显示剩余的字符。但是当该字段在模态对话框中时，它就不起作用了。

我怎样才能让它工作？

编辑：

HTML 看起来像这样：

<!DOCTYPE html>
...
<html>
...
<head>...</head>
<body>
...
<div id="myModal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ...
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-3">
                            My Field
                        </div>
                        <div class="col-md-9">
                            <input name="mymodalfield" type="text" maxlength="150" id="idmymodalfield" class="form-control max-length-field" />
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn default">Close</button>
                <input type="submit" name="myModalButton" value="Yes" onclick="...." class="btn" />
            </div>
        </div>
    </div>
</div>
...
...
<div class="row">
    <div class="col-md-12">
    ...
    <input name="myfield" type="text" maxlength="10" id="idmyfield" class="form-control max-length-field" />
    ...
    </div>
</div>
...
</body>
</html>

Bootstrap Maxlength 与“myfield”输入配合良好，但它没有出现在“mymodalfield”中。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap maxlength

【解决方案1】：

在模态对话框中，它不起作用。

也许你的宽度变化出现在你调用模态窗口之前？请首先检查这一点，因为在其他方面它不会正常工作（它在你的 html 上工作，因为你的 DOM 结构比 modal-callback 和宽度变化）

附言你能告诉我更多你的代码吗？

【讨论】：

我用一些代码编辑了这个问题。我不明白您所说的“宽度变化”是什么意思。