在表单上按下输入时打开 bootstrap 模态

Question

我创建了一些在提交时打开模式框的表单。只要单击提交按钮，它们都可以正常工作，但如果有人只是在输入框中按回车键，它就不起作用。

我试过将模态选项添加到输入框，但它只会在它们被选中后立即打开模态。

这是我的其中一个表格的 html：

<form method="POST" id="new_group">{% csrf_token %}
    <div class="form-group row justify-content-center">
        <div class="col-10">
            <input type="text" class="form-control border" id="name" name="name" placeholder="Name...">
        </div>
        <button type="button" id="new_btn" class="btn btn-viso" value="new_group" form="new_group" onclick="setSubmitValue('new_btn')" data-toggle="modal" data-target="#confirmationModal"><i class="far fa-save"></i></button>
    </div>
</form>

谢谢！

Answer 1

您可以在提交表单时添加事件处理程序。因此，无论选择哪种提交类型（输入或单击按钮），模式都会打开。这应该会为您指明正确的方向。

function submit_handler() {
  console.log("modal opened"); //send with ajax?
  $('#exampleModal').modal('show');
  event.preventDefault();
}

function submitform() {
  $('#new_group').submit();
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<form method="POST" id="new_group" onsubmit="submit_handler()">
  <div class="form-group row justify-content-center">
    <div class="col-10">
      <input type="text" class="form-control border" id="name" name="name" placeholder="Name...">
      <input type="submit" id="new_btn" class="btn btn-info">
    </div>
  </div>
</form>

<div class="modal" tabindex="-1" role="dialog" style="display:none" id="exampleModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="submitform()">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 2

如果您希望回车键默认工作，您应该在按钮中使用 type="submit"，但我认为您是通过 ajax 提交的，所以这是不可能的（并且不再推荐） ).也就是说，您需要监听所有输入元素上的 keyup 事件，并在输入时触发提交函数。

$("input").on('keyup', function (e) {
    if (e.key === 'Enter' || e.keyCode === 13) {
        // Function to submitting the form and or opening the modals here
    }
})

反正我不明白你是如何管理这里的表单提交的。 onclick 函数的作用是什么？看起来该函数修改了按钮本身的某些内容。您是要通过 ajax 还是像旧的标准方式一样提交表单？

Answer 3

你可以试试这个...

<script>
    $(document).ready(function(){
     
        $('form').on('submit',function(e){
           $('div#myModal').modal('open')
        })
    })
</script>

在表单上按下输入时打开 bootstrap 模态

Open bootstrap modal when enter pressed on form

html

javascript

bootstrap-modal

bootstrap-4