Как закрыть мой модал клавишей enter + onclick

1

У меня есть модальный, который принимает ввод и отображает его на экране, он отлично работает, когда я нажимаю кнопку "Сохранить". Но я бы хотел, чтобы он работал, когда я нажимаю клавишу ввода. Я нашел несколько ответов, но это не очень подходит для моего кода, поскольку я хочу как onClick, так и нажать enter. Я также попытался изменить кнопку для типа "отправить", но это не работает. Есть ли быстрый и простой способ сделать это с моим текущим кодом?

    function addMovie() {
    
      var i = document.getElementById('addedMovie');
      var d = document.createElement('div');
      d.id = "new-movie";
      d.innerHTML = "<p>" + "<img src='../images/movie.png'>" + i.value + "</p>";
      var p = document.getElementById('related-movies');
    
      p.appendChild(d);
    
    }
      <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Add a movie</h4>
          </div>
          <div class="modal-body">
            <input type="text" placeholder="Movie title" name="movies[]" class="modal-input" id="addedMovie">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-login" data-dismiss="modal" onClick="addMovie();clearModal()">Save</button>
          </div>
        </div>

Или есть более простой способ сделать это (путем ввода ввода в модальном виде и отображения его на div моего выбора, например? Потому что на данный момент я просто беру значение внутри ввода, но я не думаю, что я я сохраняю его в переменной)

Большое спасибо за вашу помощь !

  • 0
    Где в вашем HTML есть элемент с id related-movies ?
  • 0
    у вас есть 2 способа, один из которых заключается в прослушивании onsubmit, а не только при изменении, и ваш тип кнопки входа - отправить. Во-вторых, чтобы запустить одну и ту же функцию, это два разных события, одно по клику и одно, когда пользователь нажимает клавишу ввода.
Показать ещё 2 комментария
Теги:

2 ответа

1

Добавьте чек для ввода нажатия клавиши -

 <div id="modal" class="modal-content"> ...
   <input type="text" placeholder="Movie title" name="movies[]" class="modal-input" id="addedMovie" onkeypress="check(event)">
 </div>

function check(e) {
  if(e.key === "Enter") {
    addMovie();
    $('#modal').modal('hide');
  }
}
Поделиться
  • 0
    Здравствуй ! спасибо большое :) tje модальная скрыть не работает, хотя
  • 0
    Вы добавили модальный идентификатор? <div id = "modal" class = "modal-content">
Показать ещё 2 комментария
0

Добавьте прослушиватель событий onkeypress в текстовое поле и проверьте, нажата ли клавиша ввода. Здесь находится плункер

 <input onkeyup="save(event)" type="text" placeholder="Movie title" name="movies[]" class="modal-input" id="addedMovie">

Javascript

function save(e){
 var key = 'which' in e ? e.which : e.keyCode;
 if (key == 13) {
   addMovie()
 }
}
Поделиться
  • 0
    Вы забыли закрыть модал
  • 0
    Ну, у меня действительно нет модального ... Я думаю, что вопрос был больше связан с тем, как использовать onEnter ... потому что мы не знаем, какой фреймворк он использует для модального .. $ ('# modal'). Modal ('hide') - это jquery ... для основания css он будет другим, а для vue.js - еще одна вещь
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню