4

我正在使用引导程序，我想在弹出窗口中创建一个表单。我已经这样做了，但我无法输入表单的文本字段。有谁知道为什么？

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

* update2我想差不多了。当我打开模式和弹出框时，我无法在文本字段中输入。关闭模式后，弹出框仍然打开，然后我可以在文本字段中输入。所以文本字段和弹出窗口之间必须有一些 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();
            }
        })
    });
4

2 回答 2

1

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

$('body').on('shown','.modal', function() {
  $(document).off('focusin.modal')
});
于 2012-10-26T14:21:23.737 回答
1

对于遇到此问题的任何人（带有无法使用模态的表单的弹出框）以及使用 Bootstrap 4 的人，您可以通过data-modal="false"在打开模态的按钮/控制器上使用来解决此问题。例如：

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

如果你使用 JS 打开你的模式，你可以传入一个focus选项。此处有关选项的完整文档

于 2020-05-20T16:02:12.450 回答