Как сделать форму с только скрытыми входами внутри модальной отправки Bootstrap (4) при вводе? - PullRequest
Новая
       28

Как сделать форму с только скрытыми входами внутри модальной отправки Bootstrap (4) при вводе?

0 голосов
/ 02 мая 2018

У меня есть форма с только скрытыми входами (и скрытой кнопкой отправки) внутри модального Bootstrap. Мое намерение состоит в том, чтобы пользователь открыл модал, нажав кнопку, и затем попросил их нажать , введите сразу после того, как модал показан для отправки формы.

Основываясь на моих исследованиях (методом проб и ошибок), мне нужно иметь обработчик нажатия клавиш внутри модальной формы или формы для обработки кнопки ввода и выполнения формы submit(). И, кроме того, мне нужно сосредоточиться на форме после показа модальной.

Однако кажется, что механизм фокусировки работает неправильно. Enter submit не работает сразу после показа модала (и я звоню form.focus()). Это работает, однако, если я нажимаю на модал / форму после того, как он показан. Но я хочу, чтобы это работало без необходимости нажимать на модал.

Могу я что-то здесь упустить? Или есть лучший способ сделать это вообще?

Вот мой пример кода. После нажатия кнопки, чтобы показать модальное значение, введите не работает. Но если я щелкну где-нибудь внутри модального окна, а затем нажму , введите , это работает Я хочу, чтобы введите , чтобы работать без необходимости щелкать внутри модального. 

$('#quickSwipeModal').on('shown.bs.modal', function(e) {
  setTimeout(function() {
    $('#quickSwipeForm').focus();
  }, 400);
});
$("#quickSwipeForm").keypress(function(event) {
  if (event.which == 13) {
    event.preventDefault();
    $('#quickSwipeForm').submit();
  }
});
$('#quickSwipeForm').on('submit', function(e) {
  e.preventDefault();
  e.stopPropagation();
  alert('adding...');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top sub-menu">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#" data-toggle="modal" data-target="#quickSwipeModal">Quick Swipe Mode</a>
      </li>
    </ul>
  </div>
</nav>


<div class="modal fade" id="quickSwipeModal" role="dialog" aria-labelledby="quickSwipeModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <form id="quickSwipeForm" novalidate>
        <div class="modal-header" tabindex="-1">
          <h5 class="modal-title" id="quickSwipeModalTitle" tabindex="-1">Quick Swipe Mode</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" tabindex="-1">
							<span aria-hidden="true" tabindex="-1">&times;</span>
						</button>
        </div>
        <div class="modal-body" tabindex="-1">
          <p tabindex="-1">Swipe ID cards to add notes instantly.</p>
        </div>
        <div class="modal-footer" tabindex="-1">
          <input type="hidden" name="PatientId" tabindex="-1" />
          <input type="hidden" name="CreateDate" tabindex="-1" />
          <input type="submit" style="display: none" tabindex="-1" />
          <button type="button" class="btn btn-primary" data-dismiss="modal" tabindex="-1">Done</button>
        </div>
      </form>
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 02 мая 2018

Попробуйте добавить tabindex = 0 в форму и проверьте, работает ли ваш код. 

<form id="quickSwipeForm" tabindex="0" novalidate>
0 голосов
/ 02 мая 2018

Я хочу войти, чтобы работать без необходимости щелкать внутри модал.

Изменить с 

    $("#quickSwipeForm").keypress(function (event) {
        if (event.which == 13) {
            event.preventDefault();
            $('#quickSwipeForm').submit();
        }
    });

Кому: 

    $(document).keypress(function (event) {
        if (event.which == 13) {
            event.preventDefault();
            $('#quickSwipeForm').submit();
        }
    });
...