Как установить фокус в форме в модальном окне - PullRequest
Новая
       0

Как установить фокус в форме в модальном окне

0 голосов
/ 08 мая 2020

У меня есть следующий скрипт, который вызывает модальное окно с формой внутри. Сейчас я хотел бы изменить его так, чтобы при появлении модального окна фокус автоматически отдавался текстовому полю ввода. Я пробовал autofocus, но это не сработало. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS Modal Example</title>
    <style>
        #container{
            margin:0 auto;
            width:80%;
            font-family: verdana,arial,sans-serif;
            font-size:16px;
        }
        #modalWindow {
            position: fixed;
            font-family: arial,helvetica, sans-serif;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 99999;
            opacity:0;
            transition: opacity 400ms linear;
            pointer-events: none;
        }
        #modalWindow:target {
            opacity:1;
            pointer-events: auto;
        }
        #modalWindow > div {
            width: 400px;
            height: 240px;
            position: relative;
            margin: 10% auto;
            padding: 20px 20px 13px 20px;
            border: solid;
            border-color: black;
            border-width : 2px;
            background: #DAF7A6;
            border-radius: 10px;
        }        
    </style>

</head>

<body>

    <h1>CSS Modal Example</h1>
    <a href="#modalWindow">Open modal</a>
    <div id="container">
        <p>
            This is the main page.
        </p>
    </div>

    <div id="modalWindow">
        <div>
            <a href="#close">Close modal</a><br>
            <p>
                This is the modal. Put any text or controls here.

                <form action="/" method="post">

                    <input id="event" type="text" name="event">

                    <input type="submit" value="Submit">
                </form>

            </p>
        </div>
    </div>
</body>
</html>

1 Ответ

1 голос
/ 08 мая 2020

скорее всего "автофокус" не работает, потому что вы используете фрагмент (по крайней мере, судя по этому вопросу https://bugs.chromium.org/p/chromium/issues/detail?id=1046357)

вот мой пример с js (изменено css, добавлено js) 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS Modal Example</title>
    <style>
        #container{
            margin:0 auto;
            width:80%;
            font-family: verdana,arial,sans-serif;
            font-size:16px;
        }
        #modalWindow {
            position: fixed;
            font-family: arial,helvetica, sans-serif;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 99999;
            opacity:0;
            transition: opacity 400ms linear;
            pointer-events: none;
        }
        #modalWindow.show {
            opacity:1;
            pointer-events: auto;
        }

        #modalWindow > div {
            width: 400px;
            height: 240px;
            position: relative;
            margin: 10% auto;
            padding: 20px 20px 13px 20px;
            border: solid;
            border-color: black;
            border-width : 2px;
            background: #DAF7A6;
            border-radius: 10px;
        }
    </style>

</head>

<body>

<h1>CSS Modal Example</h1>
<button id="show-modal">Open modal</button>
<div id="container">
    <p>
        This is the main page.
    </p>
</div>

<div id="modalWindow">
    <div>
        <button id="hide-modal">Close modal</button><br>
        <p>
            This is the modal. Put any text or controls here.

        <form action="/" method="post">

            <input id="event" type="text" name="event">

            <input type="submit" value="Submit">
        </form>

        </p>
    </div>
</div>
</body>
<script>
    const modalWindow = document.querySelector('#modalWindow');
    const inputEvent = modalWindow.querySelector('#event');
    const toggleModal = () => {
        modalWindow.classList.toggle('show');
        if (modalWindow.classList.contains('show')) {
            inputEvent.focus();
        }
    }
    document.querySelector('#show-modal').addEventListener('click', toggleModal);

    document.querySelector('#hide-modal').addEventListener('click', toggleModal);
</script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...