Не работают события keyup/keypress/keydown

321

11 ноября 2017, 14:28

Необходимо сделать следующий функционал, чтобы при вводе символов с клавиатуры в input вызывалось модальное окно и то что юзер ввел в первом инпуте отобразилось во втором. Но проблема в том что события keypress/keyup/keydown не реагируют на ввод в инпут. Модалка открывается только после клика на нее лкм. В чем может быть проблема?

Небольшое демо привел ниже.

$("#input").keypress(function() { 
  const vl = $(this).val(); 
 
  $(this).magnificPopup({ 
    items: { 
      src: '#modal', 
      type: 'inline', 
    }, 
    focus: '#modal_input', 
    fixedContentPos: true, 
    callbacks: { 
      open: function() { 
 
        $("#modal_input").val(vl); 
      } 
    } 
  }); 
});

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> 
</head> 
 
<body> 
  <form> 
    <input type="text" placeholder="some text" id="input"> 
  </form> 
  <div id="modal" class="mfp-hide"> 
    <div>Hello i am a modal window</div> 
    <input id="modal_input" type="text"> 
  </div> 
</body> 
 
</html>

Это более подробная версия этого вопроса Здесь добавлена демка с проблемой и примером кода.

Answer 1

Не дружу я с JQ, мне по душе чистый JS

document.getElementById('input').addEventListener('input', function(){ 
  document.getElementById('modal_input').value = document.getElementById('input').value; 
  if(document.getElementById('input').value !== 0){ 
  document.getElementById('modal').className = 'modal'; 
  } 
})

.modal{ 
background:red; 
}

<form> 
  <input type="text" placeholder="some text" id="input"> 
</form> 
<div id="modal" class="mfp-hide"> 
  <div >Hello i am a modal window</div> 
  <input id="modal_input" type="text"> 
</div>