Inicia sesión


Curso básico de jаvascriptEl 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().

Te sugiero seguir leyendo...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-03
  • Categorias: Diseño Web CSS3 html5 javascript jQuery WebSite webmasters Noticias Tutorial

El método focus() en javascript El método focus() en javascript...
Tutoriales en linea
¿Te gusta el tutorial?




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Cómo jugar Ajedrez Online TL

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-18
  • Categorias: WebSite Juegos Noticias Tutorial

Cómo encontrar un teléfono Android perdido

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-17
  • Categorias: Android Telefonia Smartphone Tablet Tutorial

Configura tu servidor VPN en Windows

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-15
  • Categorias: Windows Internet Red Wifi Seguridad Noticias Tutorial

Como crear una web con el lenguaje HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web Lenguajes De Programacion CSS3 html5 Html WebSite webmasters Cursos Noticias Tutorial

Introducción Al Lenguaje JS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial