El método focus() en javascript

El método focus() en jаvascript, como su nombre indica, se utiliza para enfocar un elemento. No todos los elementos pueden ser enfocados y no hay una lista definitiva de elementos que admiten focus() pero sin duda los más comunes en los que se usa son los campos de formularios, entre los que que se encuentra el <textarea>. Al ejecutar el método focus en un textarea, el cursor se moverá a su interior. Supongamos que tenemos este textarea:

<textarea id="mi-textarea" rows="5" cols="25"></textarea>

Y queremos enfocarla. Con jаvascript sería así:

document.getElementById("mi-textarea").focus();

jQuery tiene su propio método focus() y la forma de uso para enfocar el textarea sería la siguiente:

$("#mi-textarea").focus();

Ejemplo: enfocar un textarea al hacer click en un enlace al que le hemos puesto la clase «click-me» (<a class="click-me">):

$(".click-me").click(function() {
    $("#mi-textarea").focus();
});

Ejemplo: al hacer click en el enlace, enfocar el textarea y hacer scroll hasta él:

$(document).ready(function() {
    $('.focus').click(function(e) {
        e.preventDefault();

        var target = jQuery("#mi-textarea");
        if (target.length) {
            $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000, function(){ // function to focus here
                   $("#mi-textarea").focus();
             });
             return false;
         }
     });
});

Anclar función al evento focus

Además de enfocar el elemento, el método jQuery.focus() nos permite más cosas. Concretamente nos permite anclar una función al evento focus, es decir, ejecutar una función (handler) cuándo el elemento sea enfocado.


Ejemplo: cada vez que el textarea sea enfocada saltará una alerta con el texto «Textarea enfocada». Este código NO realiza el enfoque del textarea, sólo ejecuta la función especificada cada vez que ocurre el evento.

$("#mi-textarea").focus(function(){
    alert("Textarea enfocada");
 });

La función handler puede recibir el objeto que representa el evento focus que ha tenido lugar, por si queremos trabajar con él:

$("#mi-textarea").focus(function(e){
    alert(e);
});

Y también podemos pasar cualquier dato adicional al handler. Estos datos adicionales estarán disponibles en la propiedad data del objeto Event:

var datos = "Algún dato";
$("#mi-textarea").focus( datos, function(e) {
    //La alerta contendrá "Algún dato"
    alert(e.data);
 });

Y, por poner un ejemplo más completo, podemos pasar cualquier tipo de variable, por ejemplo un objeto:

var objData = {name:"Juan", surname:"Padial", alias: "CybMeta" };
$("#mi-textarea").focus( objData, function(e) {
    //El alert contendrá el valor de la propiedad name ("Juan")
    alert(e.data.name);
 });

Más información en la documentación de jQuery.focus().