Question

我正在使用bootstrap，我想在popover中创建一个表单。我已经这样做但我不能输入表格的文本字段。有谁知道为什么？

* 更新它在一个模态中。在模态之外它可以工作，但在里面却没有......

* update2 我认为几乎在那里。当我打开模态和弹出窗口时，我无法输入文本字段。关闭模态后，弹出窗口仍然打开，然后我可以输入文本字段。所以textfield和popup之间必须有一些z-index。真的很草率，但我尝试了input{z-index:9999;}，但它无法正常工作

<a href="#" class="add_nr" data-nummer-id="nr_1" rel="popover">


<div id="add_number" class="popover">
    <div class="addnr" id="nr_1">
        <form class="form-inline">
            <div class="controls">
                <input type="text" placeholder="Artist">
            </div>
            <div class="controls">
                <input type="text" placeholder="Number">
            </div>
            <a href="#">cancel</a>
            <button type="submit" class="btn">add number</button>
        </form>
    </div>
</div>




$(function(){
        $('.add_nr').on('click', function(event){
            var $this = $(this);
            event.preventDefault();
            $('.add_nr').not($this).popover('hide');
            $this.popover('show');

        }).popover({
            trigger: 'manual',
            placement: 'bottom',
            content: function(e) {
                var $this = $(this),
                nr_id = $this.data('nummer-id');
                return $('#' + nr_id + '.addnr').html();
            }
        })
    });

Answer 1

当启动模态时，它会保持对自身的关注，防止表单中的元素获得焦点。一个简单的解决方法是在模态启动时禁用侦听器：

$('body').on('shown','.modal', function() {
  $(document).off('focusin.modal')
});

Answer 2

对于遇到此问题的任何人（表单形式的弹出窗口不起作用的模式）以及正在使用Bootstrap 4的用户，可以通过使用打开模式的按钮/控制器上的data-modal="false"来解决此问题。例如：

<button type="button" class="btn" data-toggle="modal" data-target="#new" data-focus="false">

如果使用JS打开模态，则可以传入focus选项。有关选项here

的完整文档

弹出窗体不起作用

2 个答案: