如何使 BootStrap-DatePicker 在按 Enter 键时提交表单

Question

我的页面包含第一个 UI 元素 Bootstrap datetimepicker4 以及几个输入字段和 2 个提交按钮：1 个用于验证表单并重定向到下一页，另一个是 Back button。

当我在网络上打开应用程序时，焦点是 datetimepicker 输入，然后单击 Next 按钮，它正在提交表单。

但是当我在 iPhone 中打开网站时，焦点在 datetimepicker 上，当我在 iPhone 键盘上单击 Go button 时，它没有提交表单。 我的要求是当我在 iPhone 中点击 Go 按钮时提交表单。

我在我的页面中使用以下脚本

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

这是我的看法：

     <div class="input-group date jsdate">
            <input type="text"
                   class="form-control">
            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
        </div>
    <input name="submit" class="btn btn-primary order-2" type="submit" value="Next">
    <input name="back" class="btn btn-outline-secondary mr-2 " type="submit" value="Back" formnovalidate formaction="BackToContactInfo?tabId=@Model.TabId">

还有 datetimepicker 的脚本

$(function () {
    $('.jsdate').datetimepicker({
        format: 'L',
        maxDate: new Date()
    });
});

我观察到在 datetimepicker 中的 enter keypress 中有两个事件正在触发：e.preventdefault 和 e.stoppropagation。 因此，根据我的要求，当按下输入而不是停止传播时，我想提交表单。 那么是否有任何设置可以继续传播，请帮助我。

Answer 1

iOS 设备上的“Go”按钮将与“Enter”按钮具有相同的键码，因此您可以检测到该按钮上触发的点击事件，如下所示，

$(document).keypress(function(e) {
  if(e.which == 13) { // for enter key
   // Do your form submission call here
  }
});

我希望这对你有用。

Answer 2

你可以用这个：

HTML：

<form action="#" id="form">
   <div class="input-group date jsdate" style="position: relative;">
       <input type="text" class="form-control" id="date">
       <span class="input-group-addon" ><i class="fa fa-calendar"></i></span>
   </div>
   <input name="submit2" class="btn btn-primary order-2" type="submit" value="Next">
   <input name="back" class="btn btn-outline-secondary mr-2 " type="submit" value="Back" formnovalidate formaction="BackToContactInfo?tabId=@Model.TabId">
</form>

JS：

 $('#date').keydown(function (e) {
     if (e.keyCode == 13) {
         $('#form').submit();
     }
 })

请注意，要使用 jquery 提交方法，您必须更改 提交 按钮的名称。