¿Cómo puede establecer el foco en un elemento de entrada HTML sin tener todo el HTML?

StackOverflow https://stackoverflow.com/questions/808908

  •  03-07-2019
  •  | 
  •  

Pregunta

Primero, el fondo: Estoy trabajando en Tapestry 4, por lo que el HTML para cualquier página se une a partir de varios bits de HTML dispersos en la aplicación. Para el componente en el que estoy trabajando, no tengo la etiqueta <body>, así que no puedo darle un atributo onload.

El componente tiene un elemento de entrada que necesita enfoque cuando se carga la página. ¿Alguien sabe una forma de establecer el foco en una entrada de archivo (o cualquier otra entrada de texto) en la carga de la página sin acceso a la etiqueta del cuerpo?

He intentado insertar un script en el cuerpo como
document.body.setAttribute('onload', 'setFocus()')
(donde setFocus es una función que establece el foco en el elemento de entrada del archivo), pero eso no funcionó. Sin embargo, no puedo decir que me haya sorprendido.

EDITAR:
Como se ha dicho, realmente necesito hacer esto con un componente de página. Terminé agregando entradas de tipo de archivo al script que usamos para enfocarnos en la primera entrada editable y visible en una página. Al investigar este problema, no he encontrado ningún problema de seguridad al hacerlo.

¿Fue útil?

Solución

Esto me ha funcionado bien: 

<script>
  function getLastFormElem(){
    var fID = document.forms.length -1;
    var f = document.forms[fID];
    var eID = f.elements.length -1;
    return f.elements[eID];
  }
</script>


<input name="whatever" id="maybesetmaybenot" type="text"/>
<!-- any other code except more form tags -->

<script>getLastFormElem().focus();</script>

Otros consejos

<script>
window.onload = function()  {
     document.getElementById('search_query').select();
    //document.getElementById('search_query').value = ''; 
    // where 'search_query' will be the id of the input element
};
</script>
¡

debe ser útil, creo!

puedes darle a la ventana un controlador de carga 

window.onload = setFocus;

Creo que tienes un problema fundamental con tu encapsulación. Aunque en la mayoría de los casos puede adjuntar un controlador de eventos al evento de carga, consulte http: // ejohn .org / projects / flexible-javascript-events / de John Resig sobre cómo hacer esto, setFocus debe ser administrado por un componente de la página ya que no puede tener dos componentes en su página que requieran que se enfoquen cuando se carga la página.

Intenta jugar con tabulación atributo

En primer lugar, el archivo de entrada no es el mismo que las otras entradas, debe tener esto en cuenta ... eso es por razones de seguridad. Cuando el archivo de entrada se enfoca, debe ser de solo lectura o el navegador debe abrir un cuadro de diálogo para elegir algún archivo.

Ahora, para las otras entradas, puede probar algún evento de carga en algunos de sus elementos ... (no solo el cuerpo tiene el evento de carga) o puede usar JavaScript en línea en el medio del html. Si pone código javascript sin decir que es una función, se ejecuta mientras el navegador la lee. Algo así como: 

<script type="text/javascript">

function yourFunction()
{
   ...;
};

alert('hello world!");

yourFunction();

</script>

La función se ejecutará después de la alerta justo cuando el navegador la lea.

Si puedes, debes usar jQuery para hacer tu javascript. Hará su vida muuuy fácil ... :)

Con jQuery podría hacerse así: 

$(function() {
    $("input:file").eq(0).focus()
})

Con JavaScript simple se podría hacer así: 

var oldWindowOnload = window.onload; // be nice with other uses of onload 
window.onload = function() {
    var form = document.forms[0];
    for(i=0; i < form.length; i++) {
        if (form[i].type == "file") {
            form[i].focus();
        }
    }
    oldWindowOnload();
}

Para una solución más elaborada con javascript simple, consulte Establezca el foco en la primera entrada en la página web en CodeProject.

La solución de Scunliffe tiene una ventaja de usabilidad.

Cuando los scripts de página se cargan lentamente, invocando focus () desde " onLoad " el evento crea una página muy desagradable " jump " si el usuario desplaza la página. Así que este es un enfoque más fácil de usar: 

<input id="..."></input>
... really small piece of HTML ...
<script>getTheDesiredInput().focus();</script>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top