El método focus() en javascript, 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 javascript 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;
         }
     });
});

El código anterior en vivo:

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 info en la documentación de jQuery.focus().

  • Si y no… en primera el listener lo pones en el name space '.focus'

    jQuery(‘.focus’).click(function(e){ <<<—

    Este código se presta a la confusión, así que si copiaste el ejemplo en otra parte, trata de “releerlo”

    Ahora en la última parte

    jQuery(“#mi-textarea”).focus( data, function(e) {

    aquí no puedes hacer alert(data), ya que no pasa directo, si no con el evento del objeto.. por que tendria que ser

    alert(e.data);

    No estoy muy seguro si puedes pasar texto plano en vez de objetos. Pero salvo eso buen trabajo.

    • Me ha sentado un poco mal eso de “si copiaste …. vuelve a leerlo”. No es que nunca tome información de otros sitios, por supuesto que lo hago, y si has leído algunos de posts verás que si es así siempre lo digo. Otra veces fragmentos de código es igual en varias webs simplemente por que es código sin que necesariamente nadie se haya copiado de nadie.

      Dicho esto. Es cierto que poner la clase “.focus” puede generar confusión al tener el mismo nombre que el método del que se está tratando. Muchas gracias por la sugerencia. Lo voy a cambiar ahora mismo.

      En la última parte, antes de poner el código lo probé. Ahora lo he vuelto a probar con el mismo resultado: se puede hacer alert(data);, pero claro, funciona por referencia a la variable del scope superior, no porque se haya pasado al handler. Mi fallo y confusión al leer la documentación del método jQuery.focus() que no es muy clara en este punto y en mi opinión incompleta.

      Respecto a pasar texto plano, se puede hacer sin problema. Aquí la documentación vuelve a ser incompleta pues dice:

      eventData
      Type: Anything
      An object containing data that will be passed to the event handler.

      Cómo ves, dice tipo “cualquiera” pero luego en la descripción habla de “objeto”. La realidad es que puedes pasar calquier tipo de datos, no sólo un objeto. He incluido algunos ejemplos en el post con diferentes tipos de datos.

      Ya se me ha pasado el malestar por tu comentario sobre “copiar”, en realidad me has ayudado a comprender mejor el método .focus() de jQuery y creo que tú también has aprendido algo. Esto me recuerda que colaborar siempre es positivo. Gracias por tu comentario.

    • Excelente, gracias por el dato.