Javascript 在第二级引导模式中包含的输入控件上设置焦点_Javascript_Vue.js_Components_Bootstrap Modal_Vuejs2

Javascript 在第二级引导模式中包含的输入控件上设置焦点

javascript vue.js vuejs2

Javascript 在第二级引导模式中包含的输入控件上设置焦点,javascript,vue.js,components,bootstrap-modal,vuejs2,Javascript,Vue.js,Components,Bootstrap Modal,Vuejs2,我使用Vue.js 2.1.10和Bootstrap 3.3.7来显示打开另一个模态对话框的模态。每个模态对话框都包含在不同的组件中。在第一个组件内部，有一个对第二个组件select travler的引用根据，我必须通过收听所显示的事件来设置焦点。这对于将焦点放在第1个模式中包含的输入控件上非常有用。问题：当模态高于另一个模态时，这种方法不起作用第一个模态组件如下所示： <template> <div ref="tripEdit" class="modal fade

我使用Vue.js 2.1.10和Bootstrap 3.3.7来显示打开另一个模态对话框的模态。每个模态对话框都包含在不同的组件中。在第一个组件内部，有一个对第二个组件select travler的引用

根据，我必须通过收听所显示的事件来设置焦点。这对于将焦点放在第1个模式中包含的输入控件上非常有用。问题：当模态高于另一个模态时，这种方法不起作用

第一个模态组件如下所示：

<template>
    <div ref="tripEdit" class="modal fade" role="dialog">
        <!-- Inbeded component -->
        <select-travler ref="selectTravler"></select-travler>
        <!-- /Inbeded component -->

        <div class="modal-lg modal-dialog">
            <div class="modal-content">
                <div class="modal-body container form-horizontal">

                    <div class="form-group">
                        <label for="travler_name" class="control-label">
                            Travler's name
                        </label>
                        <input id="travler_name" ref="travler_name"
                            v-model="travler_name"/>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data () {
            return {
                travler_name: null,
            }
        },

        methods: {
            show (operationType) {
                $(this.$refs.tripEdit).modal('show');

                let that = this;
                $(this.$refs.tripEdit).on('shown.bs.modal', function () {
                    $(that.$refs.travler_name).focus();
                });

                if (operationType === 'newTravel') {
                    this.$refs.selectTravler.show();
                }
            },            
        },
    }
</script>

当第二模态打开时，焦点仍然在第二模态对话框后面的第一模态上，我可以看到插入符号在travler_name中闪烁。当显示第二个模式时，如何将焦点设置在人名上？

这意味着您试图聚焦的元素未正确引用。尝试console.logelement；聚焦人名前的一行。看看你是否得到了正确的元素

show () {
    $(this.$refs.selectTravler).modal('show');

    let element = this.$refs.people_names;
    $(this.$refs.selectTravler).on('shown.bs.modal', function () {
        $(element).focus();
    });
},

你有没有考虑过v-show来打开和关闭你的modals？

这意味着你试图关注的元素没有被正确引用。尝试console.logelement；聚焦人名前的一行。看看你是否得到了正确的元素

show () {
    $(this.$refs.selectTravler).modal('show');

    let element = this.$refs.people_names;
    $(this.$refs.selectTravler).on('shown.bs.modal', function () {
        $(element).focus();
    });
},

你有没有考虑过v-show来打开和关闭你的modals？

我认为这里确实存在几个问题。首先，正如我在上面的评论中提到的，您没有正确地添加和删除show.bs.modal事件处理程序

其次，因为第二个模态嵌套在第一个模态中，所以show.bs.modal事件将冒泡到父模态，并且它的处理程序将启动。起初我认为stopPropagation是处理这个问题的一个好方法，但最后，我只是在模板中取消嵌套子模式组件

这是一个实际有效的行为示例

控制台。清除 Vue.Component子模式{ 模板：子模式，方法：{ 展示{ $this.$el.modalshow }, 展示{ console.logsubmodal onshown 这是。$refs.input.focus } }, 安装{ $this.$el.onshown.bs.modal，this.onshown }, 销毁前{ $this.$el.offshown.bs.modal，this.onShown } } Vue.componentmodal{ 模板：模态，方法：{ 展示{ $this.$refs.modal.modalshow }, 显示子模态{ 此.$refs.submodal.show }, 展示{ console.logparent 这是。$refs.input.focus } }, 安装{ $this.$refs.modal.onshown.bs.modal，this.onshown }, 销毁前{ $this.$refs.modal.offshown.bs.modal，this.onShown } } 新Vue{ el:应用程序， } 显示模态 &时代；情态标题关保存更改 &时代；情态标题东西显示子模态

我认为这里确实存在几个问题。首先，正如我在上面的评论中提到的，您没有正确地添加和删除show.bs.modal事件处理程序

这是一个实际有效的行为示例

我遇到了类似的问题。b型模态迫使焦点停留在模态中。您可以通过添加“无强制焦点”属性来禁用它

无强制聚焦布尔值false将禁用强制聚焦美国惯例保持模态内部的焦点

我遇到了类似的问题。b型模态迫使焦点停留在模态中。您可以通过添加“无强制焦点”属性来禁用它

无强制聚焦布尔值false将禁用强制聚焦例程保持模态内部的焦点

在我看来，每次显示模式时，您都在添加新的show.bs.modal处理程序，而且更重要的是，您在触发显示模式后添加它们。你可能想把…移走。。。将代码写入装载的事件中。另外，不要忘记在模态被破坏时删除处理程序。在我看来，每次显示模态时，您都在添加新的show.bs.modal处理程序，而且更重要的是，您是在触发模态显示后添加它们的。你可能想把…移走。。。将代码写入装载的事件中。另外，当模态被破坏时，别忘了移除处理程序。不知怎的，我还是没能在第二次聚焦时站在我这边。我在我的中实现了您的代码，并添加了console.logparent。在模态onShown方法和console.logsubmodal中。在子模态onShown方法中。按下第1个按钮后，图标显示：parent。。按下第二个按钮“显示子模式”后，Concole显示：parent。亚模态。父母亲父母亲这正常吗？我确实写了event.stopPropagation；跟你一样。@Warrio我不确定你的具体是怎么回事，但我注意到当一个模态嵌套在另一个模态中时，会为父级触发两次show.bs.modal。我更新了上面的代码以删除嵌套的子模式，现在事件只触发一次。这也可能消除了停止播放的必要性。我简直不敢相信！！它的工作原理：D我绝对欠你一两杯啤酒：D如果你有一天，你访问贝尔格莱德，发送消息！！令人惊叹的：D@Warrio很高兴听到这个消息：很棒的帖子。不知怎的，我还是没能在第二次聚焦时站在我这边。我在我的中实现了您的代码，并添加了console.logparent。在模态onShown方法和console.logsubmodal中。在子模态onShown方法中。按下第1个按钮后，图标显示：parent。。按下第二个按钮“显示子模式”后，Concole显示：parent。亚模态。父母亲父母亲这正常吗？我确实写了event.stopPropagation；跟你一样。@Warrio我不确定你的具体是怎么回事，但我注意到当一个模态嵌套在另一个模态中时，会为父级触发两次show.bs.modal。我更新了上面的代码以删除嵌套的子模式，现在事件只触发一次。这也可能消除了停止播放的必要性。我简直不敢相信！！它的工作原理：D我绝对欠你一两杯啤酒：D如果你有一天，你访问贝尔格莱德，发送消息！！令人惊叹的：D@Warrio很高兴听到：