Как сделать BootStrap -DatePicker для отправки формы при нажатии клавиши Enter - PullRequest
Новая
       37

Как сделать BootStrap -DatePicker для отправки формы при нажатии клавиши Enter

0 голосов
/ 10 февраля 2020

У меня есть страница, которая содержит первый элемент пользовательского интерфейса как Bootstrap datetimepicker4 вместе с несколькими полями ввода и 2 кнопками отправки: 1 - для проверки формы и перенаправления на следующую страницу, а другой - Back button.

Когда я открываю приложение в Интернете и фокусируюсь на вводе даты и времени и нажимаю кнопку Next, она отправляет форму.

Но когда я открываю сайт в iPhone, и основное внимание уделяется выбору даты и времени, и когда я нажимаю Go button на клавиатуре iPhone, она не отправляет форму. Мое требование здесь - отправить форму, когда я нажму кнопку Go в iPhone.

Я использую следующие сценарии на своей странице 

<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 при нажатии клавиши ввода есть два события, которые запускаются: e.preventdefault и e.stoppropagation. Таким образом, согласно моему требованию, когда нажата ввод вместо остановки распространения, я хочу отправить форму. Так есть ли какие-либо настройки для продолжения распространения, пожалуйста, помогите мне.

Ответы [ 2 ]

0 голосов
/ 10 февраля 2020

Вы можете использовать это:

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 метода отправки вам необходимо изменить имя кнопки Отправить .

0 голосов
/ 10 февраля 2020

Ваша кнопка «Go» на устройстве iOS будет иметь тот же код клавиши, что и кнопка «Ввод», так что вы можете определить событие щелчка, выполненное для этой кнопки, как показано ниже, 

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

Надеюсь это будет работать для вас.

...