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

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

<div class = "modal fade nopading" id = "myModalpop" role = "dialog">
    <div class = "model-area">

        <!-- Modal content-->
        <div class = "modal-content">
            <div class = "modal-head">
                <a class = "navbar-brand" href = "index.html"><img src = "~/Content/images/logo.png" alt = "Ova" style = "float: left; padding-top: 10px;"></a>
                <form class = "form-inline md-form form-sm mt-0" style = "text-align: center;" method = "get" action = "@Url.Action("Review", "Product")">
                    <a href"#"><i class = "fa fa-search" aria-hidden = "true"></i></a>
                    <input name = "id" class = "form-contro form-control-sm ml-3 w-75 wow fadeInRight animated" id = "txtsearch"  type = "text" placeholder = "Search" aria-label = "Search">
                </form>
                <button type = "button" class = "close" data-dismiss = "modal">&times;</button>

            </div>
            <div class = "modal-body" style = "padding: 0px;">
                @*<p class = "links_p wow fadeInRight animated">QUICK LINKS</p>*@

            </div>

        </div>
    </div>

</div><!-- end navbar-cell -->

Я применил javascript

<script type = "text/javascript">
$(document).ready(function () {

    $('#myModalpop').on('show.bs.modal', function () {

        $('#txtsearch').focus;
        //$(this).find('#txtsearch').focus();
     });
});
</script>

Сосредоточиться на текстовом поле

вы можете сослаться на эту ссылку developer.mozilla.org/en-US/docs/Web/API/HTMLElement/фокус

Sumit Nair 30.05.2019 09:20

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

jiga 30.05.2019 09:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
857
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Редактировать:

<div class = "model-area">

'show.bs.modal'

изменить на

<div class = "modal-dialog">

'shown.bs.modal'

Обратите внимание на модель и модальный


Вы скобку пропустили?

$('#txtsearch').focus();

да, это работает, но это влияет на дизайн моего проекта

jiga 30.05.2019 11:27

возможно, нужно также изменить CSS соответственно?

Alanw 30.05.2019 11:31

Вызывается с выбранным идентификатором всплывающего окна.

$('#myModalpop #txtsearch').focus();
Ответ принят как подходящий

У вас есть два решения для решения этой проблемы

первый использует функцию setTimeout, чтобы установить фокус вашего текстового поля в событии 'show.bs.modal', потому что это событие запускается до того, как модель показана ниже

$(function () {
    $('#myModalpop').on('show.bs.modal', function () {
          setTimeout(function(){ $('#txtsearch').focus(); }, 300);         
     });
});

второе решение использует событие 'shown.bs.modal', которое запускается после показа модального окна, но вы должны удалить класс fade из своей модели следующим образом:

$(function () {
    $('#myModalpop').on('shown.bs.modal', function () { 
        $('#txtsearch').focus();
     });
});

Другие вопросы по теме