Необходимо сделать следующий функционал, чтобы при вводе символов с клавиатуры в 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>
Это более подробная версия этого вопроса Здесь добавлена демка с проблемой и примером кода.