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

Question

我有同样的问题,因为这个问题,虽然我的情况略有不同,没有一个解决方案,为我提供工作.

我在ASP更新面板中有一个bootstrap模式对话框,带有一个tinyMCE控件,除了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 模式代码（函数 enforceFocus）中看到。由于 TinyMCE 对话框在引导模式之外呈现，因此模式不允许它们获得焦点。

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

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

• enforceFocus在 Bootstrap 模态初始化之前重写该函数，通过

  $.fn.modal.Constructor.prototype.enforceFocus = $.noop;
  

  此后，这将禁用所有模式的该功能。

• 对话框初始化后，删除焦点事件处理程序。

  $(document).off('focusin.bs.modal');
  

  这将禁用当前打开的模态中的功能，但新打开的模态仍然具有该功能。