enfoque () Método con el Ejemplo en JavaScript

JavaScript | enfoque () Método : Aquí, vamos a aprender sobre el método enfoque () con el ejemplo en JavaScript .

JavaScript | enfoque () método Método

El enfoque () en DOM se utiliza para dar el foco a un elemento. Su contrapartida es método desenfoque () que elimina ese elemento en particular de enfoque. No se necesita ningún parámetro y no tiene un tipo class.

Ejemplo:

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Focus method</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: palegreen;
}
form {
position: absolute;
top: 50px;
left: 250px;
border: 2px solid white;
background: whitesmoke;
text-align: center;
padding: 12px;
margin: 12px;
width: 700px;
}
</style>
<body>
<div class="container">
<form action="">
<input type="text" name="Name" id="name" placeholder="Name">
<input type="email" name="Email" id="email" placeholder="Email">
<input type="password" name="Password" id="password" placeholder="Password">
<button class="btn">Submit form!</button>
</form>
</div>
</body>
<script>
</script>
</html>

salida

focus() Method with Example in JavaScript - 4

Se puede ver que los estilos de Materialise sus formas de tal manera que al hacer clic en un campo de entrada, un azul aparece subrayado debajo de ese campo.

focus() Method with Example in JavaScript - 5

Al hacer clic en el campo de la contraseña, hay un subrayado azul que indica que el campo está en foco. Podemos establecer un campo de foco sin hacer clic en él mediante la activación es un evento onmousemove .

<input type="text" name="Name" id="name" placeholder="Name" onmousemove="focus()">

focus() Method with Example in JavaScript - 6

Ahora, cuando muevo el ratón sobre el campo de entrada Nombre , la onmousevent se desencadena y se dispara la función de enfoque debido a que vemos el pequeño subrayado azul en el campo.


Deja un comentario

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