javascript - sirve - ventana modal bootstrap
Enfoque de campo de entrada modal de arranque de Twitter (9)
Tengo el siguiente formulario modal del ejemplo:
<!-- 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>
Quiero que mi campo de entrada se enfoque después de que se muestre modal.
He probado tanto el enfoque automático como el foco de campo en el evento $(''modal'').shown() . Se enfoca un poco en el campo (tengo otro evento que muestra la etiqueta cuando el campo está enfocado) pero, de hecho, el campo no está enfocado y tengo que presionar TAB para enfocarlo nuevamente. También probé algo como esto:
$(".modal").on(''shown'', function() {
$(this).find("[autofocus]:first").focus();
});
y configuración del autofocus:"autofocus" atributo autofocus:"autofocus" para mi campo. Dio el mismo efecto.
Todo lo que probé funciona cuando el modal es solo un div común, se centra en la carga de la página. Pero cuando modal es activado por el botón, nada funciona (seguro que también cambio la lógica, cuando modal es solo un div común, puedo enfocarlo onload, cuando disparo por botón lo tomo en cuenta y trato de resolverlo en consecuencia).
Lo que quiero es solo el campo que se enfocará después de que se haya cargado modal, de modo que tenga el cursor parpadeante y el usuario pueda comenzar a escribir.
Lo único que funcionó fue cambiar a bootstrap.js en sí mismo, puse $("#myInput").focus() algún lugar dentro de la sección modal de bootstrap.js pero bueno, olvidé dónde estaba, y segundo, creo que no es bueno cambiar la API de bootstrap.js, debe haber una solución más fácil y más elegante. Consejo por favor, gracias xD
ACTUALIZAR:
Antes que nada, ¡gracias por tu ayuda! Gracias a ti, descubrí que el problema que tenía era el problema de Rails.
Aquí esta lo que hice:
1). rails generate controller home index
2). app / views / home / index.html y app / assets / javascript / something.js son como en este jsFiddle proporcionado por robertklep : http://jsfiddle.net/JCaFp/
4). jquery-1.9.1.js y bootstrap.js están en app / assets / javascript / (ambos están actualizados desde el sitio web, nada ha cambiado)
5). app / views / layouts / application.html.erb - Supongo que este archivo es la clave de nuestra solución:
<!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>
Aún no funciona. Todos los archivos js se incluyen, pero cuando abro mi navegador modal - ingrese a foco por un momento y se desenfoca nuevamente.
También he intentado esto:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
Todavía lo mismo.
Sugerencias? :)
ACTUALIZAR:
¡Resuelto!
Después de cambiar mi somehow.js a
$(document).ready(function() {
$(".modal").on(''shown'', function() {
$(this).find("[autofocus]:first").focus();
});
});
y application.html.erb stylesheet a:
<%= javascript_include_tag "jquery" %>
<%= javascript_include_tag "bootstrap" %>
<%= javascript_include_tag "somehow" %>
funciona como se esperaba ¡Gracias de nuevo!
Creo que el nombre del evento shown cambió en Bootstrap 3, como se explica en this publicación.
Como señala @MrDBA , en Bootstrap 3, el nombre del evento se shown a
shown.bs.modal.
Entonces, para el uso de Bootstrap 3:
$(''#myModal'').on(''shown.bs.modal'', function () {
$(''#myInput'').focus();
})
Creo que la respuesta actualizada es bastante inteligente. Aquí hay otra forma de resolverlo.
El archivo js de Bootstrap 3.2 incluye una secuencia de comandos para administrar el enfoque durante y después de la transición de fundido modal. Esto interfiere con cualquier jQuery, javascript o rails + HTML5 que se centre en un campo de formulario en el modal: el arranque elimina su enfoque después de las cargas modales.
Para eliminar la capacidad de bootstrap de anular su enfoque, comente esta línea en el área de script Modal:
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)
Ahora su campo debería poder tener foco en cualquier forma modal.
Eliminé tabindex = "- 1" y funciona muy bien.
Mi código HTML antes de los cambios:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Mi código HTML después de los cambios:
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Mi código de entrada:
<input id="tblModalNombreConductor" type="text" maxlength="50" placeholder="Ej: Armando Casas" autofocus/>
Y no tengo configuraciones en mi código Javascript.
Intente eliminar tabindex="-1" y funciona bien.
Entonces cambia esto:
<div class="modal fade" id="modalID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
A esto:
<div class="modal fade" id="modalID" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Para una solución general que no requiera un código específico para cada diálogo, puede usar esto:
$(''.modal'').on(''shown.bs.modal'', function () {
$(this).find(''input:text:visible:first'').focus();
})
Si tiene problemas con "shown.bs.modal", simplemente configure un tiempo de espera.
setTimeout(function() {
$(''#myInput'').focus();
}, 500);
Simplemente cambiando $(this).find("[autofocus]:first").focus(); a $(this).find("#myInput").focus(); lo hizo funcionar para mí. Si ha cambiado la API de Bootstrap y desea deshacer ese cambio, siempre puede volver a descargar y reemplazar el archivo.
También puedes probar
$(''#the-modal'').on(''shown.bs.modal'', function(e) {
$(''#the-input'').focus();
});
Usted puede hacer: por ejemplo
<%= f.text_field :first_name, class: "form-control", placeholder: "Enter first name", autofocus: true%>
solo agrega esto: autofocus: true