0

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

<%@ 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>
3
  • вы фокус ставьте, когда окно уже показано будет, то есть по завершении анимации.
    – teran
    Commented 11 янв. 2018 в 13:39
  • не относится к конкретно вашей проблеме, но Не используйте .click и аналогичные функции, они а) не универсальные б) считаются устаревшими Вместо них используйте $(this).on("click","#show", function(){}); или .delegate (в зависимости от версии jquery) on является новее. Например, click не будет работать с теми элементами DOM, которые подгрузились или создались впоследствии, а delegate и on будут
    – Peresada
    Commented 11 янв. 2018 в 13:47
  • Спасибо, учту .
    – user_Kyrt
    Commented 11 янв. 2018 в 14:01

1 ответ 1

2

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

$('#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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.