Question

我遇到与question相同的问题，虽然我的情况略有不同，所提供的解决方案都不适合我。

我在一个带有tinyMCE控件的ASP更新面板中有一个bootstrap模式对话框，除了tinyMCE的任何模态弹出窗口外，它都可以正常工作 - 所有输入控件都是无法聚焦的，点击和标签不起作用。

普遍的共识是使用e.stopImmediatePropagation()虽然这在我的设置中没有任何作用。

<asp:Panel ID="EditShowDetailsPanel" runat="server" CssClass="modal fade" TabIndex="-1" role="dialog" aria-labelledby="EditShowDetailsPanel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <asp:UpdatePanel ID="EditShowDetailsUpdatePanel" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-header">
                        <h4 class="modal-title">Edit Show Details</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-12">
                                <asp:TextBox ID="ShowInfoTextBox" TextMode="MultiLine" runat="server" ClientIDMode="Static" />
                                ....
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <asp:LinkButton ID="SaveEditShowDetailsLinkButton" runat="server" OnClientClick="mceSave();" OnClick="SaveEditShowDetailsLinkButton_Click" CssClass="btn btn-success">Save Changes</asp:LinkButton>
                        <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">Cancel</button>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</asp:Panel>


<script type="text/javascript">

        function mceSave() {
            //save contents to textbox
            tinyMCE.triggerSave();
        }

        function pageLoad() {

            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(BeginRequestHandler);

            function BeginRequestHandler(sender, args) {
                //remove mce editor
                tinymce.execCommand('mceRemoveEditor', true, 'ShowInfoTextBox');
            }

            //TinyMCE init
            $(document).ready(function () {
                tinymce.init({
                    selector: "textarea#ShowInfoTextBox",
                    menubar: false,
                    theme: "modern",
                    height: 300,
                    plugins: [
                        "link lists hr anchor media code"
                    ],
                    toolbar: "undo redo | bold italic underline | bullist numlist | link | media | code"

                });
            });
}
</script>

Answer 1

Bootstrap模态具有一项功能，可以防止模态本身之外的任何元素聚焦。这可以在Bootstrap模态代码（the enforceFocus function）中看到。由于TinyMCE对话框是在bootstrap模态之外渲染的，因此模态不允许它们被聚焦。

在 Bootstrap 4 中，可以通过在模态配置中设置focus: false来禁用此功能。

在 Bootstrap 3 中，无法抑制此功能。以下是两种可能的解决方法：

在Bootstrap模式初始化之前覆盖enforceFocus函数，通过
```
$.fn.modal.Constructor.prototype.enforceFocus = $.noop;
```
此后将禁用所有模态的功能。
初始化对话框后删除焦点事件处理程序。
```
$(document).off('focusin.bs.modal');
```
这将禁用当前打开的模式中的功能，但新打开的模式仍会有。

ASP Update Panel中的Bootstrap模式对话框可防止tinyMCE插件中的输入焦点

1 个答案: