У меня есть следующая модальная форма из примера:
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Enter something: <input type="text" id="myInput">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
Я хочу, чтобы мое поле ввода сфокусировалось после отображения модальности.
Я попробовал автофокус и установил фокус поля на событии $('modal').shown(). Это своего рода фокусное поле (у меня есть другое событие, которое показывает метку, когда поле фокусируется), но на самом деле поле не сфокусировано, и я должен нажать TAB, чтобы снова сфокусировать его.
Я также пробовал что-то вроде этого:
$(".modal").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
и установить атрибут autofocus:"autofocus" для моего поля.
Это дало тот же эффект.
Все, что я пробовал, работает, когда модальное является обычным div, он фокусируется на загрузке страницы. Но когда модальный запускается кнопкой - ничего не работает (конечно, я также меняю логику, когда модальный - это просто обычный div, я могу сосредоточить его на загрузке, когда я запускаю по кнопке, я принимаю это во внимание и пытаюсь решить ее соответствующим образом).
То, что я хочу, - это просто поле, которое нужно сфокусировать после загрузки модала, так что он мигает курсором, и пользователь может просто начать вводить текст.
Единственное, что сработало, это изменение самого bootstrap.js, я положил $("#myInput").focus() где-то внутри модального раздела bootstrap.js, но я забыл, где он был, а во-вторых - мне нехорошо менять bootstrap.js API, должно быть проще и более элегантным решением. Советуйте пожалуйста, спасибо xD
UPDATE:
Прежде всего, спасибо за вашу помощь!
Благодаря вам я понял, что проблема у меня была проблема Rails.
Вот что я сделал:
1). rails generate controller home index
2). app/views/home/index.html и app/assets/javascript/something.js похожи на этот jsFiddle, предоставленный robertklep: http://jsfiddle.net/JCaFp/
4). jquery-1.9.1.js и bootstrap.js находятся в app/assets/javascript/(оба они свежие с веб-сайта, ничего не изменилось)
5). app/views/layouts/application.html.erb - Я думаю, что этот файл является ключом к нашему решению:
<!DOCTYPE html>
<html>
<head>
<title>Udc</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
Все еще не работает. Все js файлы включаются, но когда я открываю свой модальный в браузере - ввод получает фокус на мгновение и снова фокусируется.
Я также пробовал это:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
Все тот же материал.
Предложения?:)
ОБНОВЛЕНИЕ:
Решил!
После изменения моего somehow.js на
$(document).ready(function() {
$(".modal").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
});
и application.html.erb таблица стилей:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
работает так, как ожидалось. Еще раз спасибо!