En este artículo, cambiaremos el borde de entrada después de completar el texto en el campo de texto de entrada. El atributo de evento onchange funciona cuando el valor del elemento cambia y selecciona el nuevo valor de la lista.
Enfoque: cada vez que el usuario cambia el valor de entrada con algún valor, se activa el atributo de evento onchange . Después de que se activa el evento, el valor se comprueba si no es nulo. Si el valor del usuario existe, el borde inferior del control de entrada se cambia a un color rojo punteado mediante el uso de estilo en línea.
Sintaxis:
<element onchange = "script">
Ejemplo: En este ejemplo, cambiaremos el estilo del borde inferior cuando el usuario escriba algún texto en el campo.
HTML
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<h2>GeeksForGeeks</h2>
<h2>
Change input
borders after filling data
</h2>
<form>
<label> NAME</label>
<input type="text" id="fname"
name="fname" value="">
<input type="submit" value="submit">
</form>
<script>
var gfg = document.getElementById("fname");
gfg.onchange = function (e) {
if (gfg.value != '') {
e.target.style.borderBottom
= "4px dotted red";
}
};
</script>
</body>
</html>
Producción:
- Antes de llenar el texto:
- Después de llenar el texto:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA