Фокус фонового ввода

У меня есть следующая модальная форма из примера:

<!-- 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" %>

работает так, как ожидалось. Еще раз спасибо!

Ответы

Ответ 1

Я думаю, что показано имя события, измененное в Bootstrap 3, как описано в this post.

Как отмечает @MrDBA, в Bootstrap 3 название события изменено на shown.bs.modal.

Итак, для Bootstrap 3 используйте:

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

Ответ 2

Для общего решения, которое не требует конкретного кода для каждого диалога, вы можете использовать это:

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:text:visible:first').focus();
})

Ответ 3

Попробуйте удалить tabindex="-1", и он работает хорошо.

Итак, измените это:

<div class="modal fade" id="modalID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Для этого:

<div class="modal fade" id="modalID" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Ответ 4

Просто изменение $(this).find("[autofocus]:first").focus(); на $(this).find("#myInput").focus(); заставило его работать для меня. Если вы изменили API Bootstrap и хотите отменить это изменение, вы всегда можете просто перезагрузить и заменить файл.

Ответ 5

Если у вас возникли проблемы с "показанным .bs.modal", просто установите тайм-аут.

setTimeout(function() {
$('#myInput').focus();
}, 500);

Ответ 6

Я удалил tabindex = "- 1", и он работает так хорошо.

Мой код HTML до изменений:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Мой код HTML после изменений:

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Мой код ввода:

<input id="tblModalNombreConductor" type="text" maxlength="50" placeholder="Ej: Armando Casas" autofocus/>

И у меня нет конфигураций в коде Javascript.

Ответ 7

Я думаю, что обновленный ответ довольно умный. Вот еще один способ ее решения.

Файл Bootstrap 3.2 js включает в себя script для управления фокусом во время и после модального перехода к постепенному исчезновению. Это мешает любому jQuery, javascript или rails + HTML5, фокусирующимся на поле формы в модальном бутстрапе, удаляет фокус после модальных нагрузок.

Чтобы удалить способность загрузочной записи переопределить фокус, закомментируйте эту строку в области Modal script:

transition ?
    that.$element.find('.modal-dialog') // wait for modal to slide in
      .one($.support.transition.end, function () {
        // that.$element.focus().trigger(e)
        // the line above is stealing your focus after modal loads!
      })
      .emulateTransitionEnd(300) :
    that.$element.focus().trigger(e)

Теперь ваше поле должно быть в центре внимания в любой модальной форме.

Ответ 8

Вы можете сделать: например,

<%= f.text_field :first_name, class: "form-control", placeholder: "Enter first name", autofocus: true%>

просто добавьте это: autofocus: true

Ответ 9

Вы также можете попробовать

$('#the-modal').on('shown.bs.modal', function(e) {
    $('#the-input').focus();
});