Inicia sesión


El método focus() en javascript

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().


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




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






Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Cómo eliminar a todos los usuarios de Twitter que estás siguiendo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google Chrome Redes Sociales Twitter Noticias Tutorial

Cómo escribir un poema

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial