J'ai le texte suivant formulaire modal à partir de l'exemple:
<!-- 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>
Je veux que mon champ de saisie pour être porté après modale est affichée.
J'ai essayé à la fois de l'autofocus et du champ de réglage de se concentrer sur $('modal').shown() événement. Il se concentre un peu de champ (j'ai un autre événement qui montre l'étiquette lorsque le champ est concentré) mais en fait, le terrain n'est pas concentré et je dois appuyer sur TAB pour se concentrer à nouveau.
J'ai aussi essayé quelque chose comme ceci:
$(".modal").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
et le paramètre autofocus:"autofocus" de l'attribut de mon domaine.
Il a donné le même effet.
Tout ce que j'ai essayé fonctionne pour quand modal est juste une habitude div, il obtient le focus sur le chargement de la page. Mais quand modal est déclenché par le bouton - rien ne fonctionne (que j'ai changer de logique aussi, quand modal est juste une habitude div, je peux me concentrer il onload, quand je déclenchement par bouton-je le prendre en compte et d'essayer de le résoudre).
Ce que je veux, c'est juste le terrain pour être porté après modal est chargé, de sorte qu'il a le curseur qui clignote et l'utilisateur peut commencer à taper.
Seule chose qui a fonctionné est en train de changer bootstrap.js lui-même, j'ai mis $("#myInput").focus() quelque part à l'intérieur de bootstrap.js modal section mais bon, j'ai oublié où il était, et la deuxième je pense que c'est pas bien de changer bootstrap.js API, il doit être plus facile et plus élégant. Me conseiller s'il vous plaît, merci xD
Mise à JOUR:
Tout d'abord, merci pour votre aide!
Grâce à vous j'ai compris que le problème que j'ai eu est de Rails de problème.
Voici ce que j'ai fait:
1). rails generate controller home index
2). app/views/home/index.html et app/assets/javascript/something.js sont comme dans ce jsFiddle fournis par robertklep: http://jsfiddle.net/JCaFp/
4). jquery-1.9.1.js et bootstrap.js sont dans app/assets/javascript/ (les deux sont fraîches en provenance de site web, rien n'a changé)
5). app/views/layouts/de l'application.html.erb - je suppose que ce fichier est la clé de notre solution:
<!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>
Ne fonctionne toujours pas. Tous les js, les fichiers inclus, mais quand j'ai ouvert mon modal dans le navigateur d'entrée activé pendant un moment et devient floue de nouveau.
J'ai aussi essayé ceci:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
Encore la même chose.
Des Suggestions? :)
Mise à JOUR:
Résolu!
Après changement de mon somehow.js de
$(document).ready(function() {
$(".modal").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
});
et application.html.erb feuille de style afin de:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
il fonctionne comme prévu. Merci encore!
