jQuery | focus() con ejemplos

El focus() es un método incorporado en jQuery que se usa para enfocarse en un elemento. El elemento se enfoca con el clic del mouse o con el botón de navegación de pestañas. 

Sintaxis:

$(selector).focus(function)

Aquí selector es el elemento seleccionado. 

Parámetro: Acepta un parámetro opcional «función» que especifica la función que se ejecutará cuando ocurra el evento de enfoque. 

Valor devuelto: Devuelve el elemento seleccionado que se enfoca.

código jQuery para mostrar el funcionamiento del método focus():

Código #1: En el siguiente código, se pasa una función a este método. 

html

<html>
 
<head>
    <style>
        span {
            display: none;
        }
         
        body {
            width: 35%;
            height: 50px;
            border: 2px solid green;
            padding: 35px;
            margin: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js">
    </script>
</head>
 
<body>
    <!-- this paragraph element get focused -->
    <p>
        <input type="text"> <span>focused</span></p>
 
    <!-- jQuery code to show working of this method -->
    <script>
        $("input").focus(function() {
            $(this).next("span").css("display", "inline");
        });
    </script>
 
</body>
 
</html>

Salida: antes de que el mouse haga clic dentro del campo de entrada-

  

Después de hacer clic con el mouse dentro del campo de entrada con el texto «GeeksforGeeks»-

  

Código #2: En el siguiente código, no se pasa ningún parámetro a este método. 

html

<html>
 
<head>
    <style>
        span {
            display: none;
        }
         
        body {
            width: 30%;
            height: 50px;
            border: 2px solid green;
            padding: 35px;
            margin: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js">
    </script>
</head>
 
<body>
    <!-- this paragraph element get focused -->
    <p>
        <input type="text"> <span>focused</span></p>
 
    <!-- jQuery code to show working of this method -->
    <script>
        $("input").focus();
    </script>
 
</body>
 
</html>

Salida: antes de hacer clic con el mouse dentro del campo de entrada-

  

Después de hacer clic con el mouse dentro del campo de entrada con el texto «GeeksforGeeks»-

 

jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» . Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .

Publicación traducida automáticamente

Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *