Установить курсор в поле ввода в модальном окне jQuery

282

14 января 2018, 04:06

При вызове модального окна не ставится курсор в поле ввода, помогите решить. Код страницы:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page pageEncoding="UTF-8" %>
<html>
<head>
    <script src="<c:url value="/js/jquery.js"/> "></script>
    <style type="text/css">
        #modalForm {
            background: yellow;
            position: fixed;
            display: none;
            z-index: 5;
        }
        #modalForm #modalClose {
            cursor: pointer;
        }
        #overlay {
            z-index: 3;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            cursor: pointer;
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#show').click(function (event) {
                event.preventDefault();
                $("#myInp1").focus();// ставим фокус на поле
                $('#overlay').fadeIn(400,
                    function () {
                        $('#modalForm')
                            .css('display', 'block')
                            .animate({opacity: 1, top: '50%'}, 200);
                    });
            });
            $('#modalClose, #overlay').click(function () {
                $('#modalForm').animate({opacity: 0, top: '45%'}, 200,
                    function () {
                        $(this).css('display', 'none');
                        $('#overlay').fadeOut(400);
                    }
                );
                $("#myInp1").val("");// очищаем инпут
                $("#myImg").val("");// очищаем инпут
            });
        });
    </script>
</head>
<body>
<button id="show" >окно</button>
<!-- Модальное окно -->
<div id="modalForm">
    <span id="modalClose">X</span>
    <br>
    <input id="myInp1" type="text" placeholder="имя" autofocus>
    <br>
    img: <input id="myImg" type="file">
</div>
<div id="overlay"></div>
</body>
</html>

Answer 1

Не надо пытаться ставит фокус на поле, которое не показыавется. Сначала покажите форму, потом поставьте фокус.

$('#show').click(function (event) { 
    event.preventDefault(); 
     
    $('#overlay').fadeIn(400, 
        function () { 
            $('#modalForm') 
                .css('display', 'block') 
                .animate({opacity: 1, top: '50%'}, 200); 
 
            $("#myInp1").focus();// ставим фокус на поле         
        }); 
});

#modalForm { 
    background: yellow; 
    position: fixed; 
    display: none; 
    z-index: 5; 
} 
 
#modalForm #modalClose { 
    cursor: pointer; 
} 
 
#overlay { 
    z-index: 3; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    cursor: pointer; 
    display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button id="show" >окно</button> 
 
<!-- Модальное окно --> 
<div id="modalForm"> 
 
    <span id="modalClose">X</span> 
    <br> 
    <input id="myInp1" type="text" placeholder="имя" autofocus> 
    <br> 
    img: <input id="myImg" type="file"> 
 
</div> 
<div id="overlay"></div>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Поп-ап в соседстве с svg-картой не реагирует на действия мышки

Есть svg-карта, поверх которой всплывает поп-ап с информацией о провинциях (#provinceInfo)В этом поп-апе у меня не работает прокрутка текста, поскольку...

271

HTML