Привет, я хочу сфокусироваться на текстовом поле ввода, когда открывается модальное всплывающее окно начальной загрузки.
<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">×</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>
Сосредоточиться на текстовом поле
Нет, эта ссылка предназначена только для фокуса на текстовом поле при нажатии на текстовое поле, но я хочу, чтобы он отображал фокус в текстовом поле при открытии модального окна.
Редактировать:
<div class = "model-area">
'show.bs.modal'
изменить на
<div class = "modal-dialog">
'shown.bs.modal'
Обратите внимание на модель и модальный
Вы скобку пропустили?
$('#txtsearch').focus();
да, это работает, но это влияет на дизайн моего проекта
возможно, нужно также изменить CSS соответственно?
Вызывается с выбранным идентификатором всплывающего окна.
$('#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();
});
});
вы можете сослаться на эту ссылку developer.mozilla.org/en-US/docs/Web/API/HTMLElement/фокус