我正在使用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最大长度与“myfield”输入配合良好，但它不会出现在“mymodalfield”中。
2条答案
按热度按时间lf5gs5x21#
是在胁迫回应对话方块中，所以无法运作。
也许你的宽度变化出现在你调用模态窗口之前？请首先检查这一点，因为在其他方面，它将不会工作，正确（它在你的html工作，因为DOM结构，你有比模态回调，然后宽度变化）
你能告诉我更多你的代码吗？
k10s72fa2#
问题来自于模态的Z索引与文本区域单词计数器的Z索引的比较：
转到bootstrap-maxlength.min.js并将zIndex值更改为上级的数字（如果模态z-index为1500，则在文件中将zIndex设置为1520）
别忘了清除浏览器中的缓存，瞧！