Ho il seguente form modale da esempio:Twitter bootstrap campo di inserimento modale attenzione
<!-- 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>
voglio che il mio campo di input da mettere a fuoco dopo modale viene mostrato.
Ho provato sia l'autofocus che l'attivazione del campo di messa a fuoco sull'evento $('modal').shown(). Si focalizza sul campo (ho un altro evento che mostra l'etichetta quando il campo è focalizzato) ma in realtà il campo non è focalizzato e devo premere TAB per focalizzarlo di nuovo. Ho anche provato qualcosa di simile:
$(".modal").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
e l'impostazione attributo autofocus:"autofocus" per il mio campo. Ha dato lo stesso effetto.
Tutto ciò che ho provato funziona per quando mod è solo un normale div, si focalizza sul caricamento della pagina. Ma quando modale viene attivato dal pulsante - non funziona nulla (sicuramente cambio anche la logica, quando modal è solo un normale div, posso concentrarlo su onload, quando faccio il trigger per pulsante lo prendo in considerazione e cerco di risolverlo di conseguenza).
Quello che voglio è solo il campo da mettere a fuoco dopo che il modale è stato caricato, in modo che abbia il cursore lampeggiante e l'utente possa semplicemente iniziare a digitare.
L'unica cosa che ha funzionato sta cambiando bootstrap.js stessa, ho messo da qualche parte dentro $("#myInput").focus() bootstrap.js sezione modale ma ben Ho dimenticato dove era, e la seconda - penso che non è bene cambiare bootstrap.js API, ci deve essere una soluzione più semplice ed elegante. mi consiglio per favore, grazie xD
UPDATE:
Prima di tutto, grazie per il vostro aiuto! Grazie a te ho capito che il problema che ho avuto è il problema di Rails.
Ecco cosa ho fatto:
1). rails generate controller home index
2). app/views/home/index.html e app/beni/javascript/something.js sono come in questo jsFiddle fornito da robertklep: http://jsfiddle.net/JCaFp/
4). jquery-1.9.1.js e bootstrap.js sono in app/beni/javascript/ (entrambi sono freschi dal sito, non è cambiato nulla)
5). app/views/layout/application.html.erb - Credo che questo file è la chiave della nostra soluzione:
<!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>
ancora non funziona. Tutti i file js vengono inclusi, ma quando apro la mia modal nel browser - l'input si concentra per un momento e diventa di nuovo sfocato.
Inoltre ho provato questo:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
Ancora stessa roba.
Suggerimenti? :)
UPDATE:
risolto!
Dopo aver cambiato il mio somehow.js a
$(document).ready(function() {
$(".modal").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
});
e application.html.erb foglio di stile a:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
funziona come previsto. Grazie ancora!
Il codice all'interno del gestore 'shown' funziona bene per me (a condizione che effettivamente impostare l'attributo' autofocus', altrimenti il selettore non lo troverà): [demo qui] (http://jsfiddle.net/JCaFp/) – robertklep
robert, puoi aggiungere il tuo commento come risposta? Lo contrassegnerò come quello giusto :) – konnigun