Dada un área de texto de entrada y la tarea es transformar los caracteres en minúsculas en caracteres en mayúsculas mientras recibe la entrada del usuario. Se puede hacer usando CSS o JavaScript. El primer enfoque usa la propiedad de transformación CSS y el segundo enfoque usa JavaScript para convertir el carácter en minúsculas en mayúsculas.
Enfoque 1: este enfoque utiliza la propiedad de transformación de texto CSS para transformar los caracteres en minúsculas en caracteres en mayúsculas mientras recibe información del usuario.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML> <html> <head> <title> How to change Input character to Upper Case while typing using CSS/JavaScript ? </title> </head> <body style = "text-align:center;"> <h1 style = "color: green"> GeeksForGeeks </h1> <p id = "GFG_UP" style = "font-size: 20px; font-weight: bold;"> Type in the input box in lower case to see the effect. </p> Type Here: <input id="yourid" style="text-transform: uppercase" type="text" /> <br><br> <p id = "GFG_DOWN" style = "color:green; font-size: 26px; font-weight: bold;"> </p> </body> </html>
Producción:
- Antes de escribir en el cuadro de entrada:
- Después de escribir letras minúsculas en el cuadro de entrada:
Enfoque 2:
- Utilice el método keyup() para activar el evento keyup cuando el usuario suelta la tecla del teclado.
- Utilice el método toLocaleUpperCase() para transformar la entrada a mayúsculas y vuelva a establecerlo en el elemento de entrada.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to change Input character
to Upper Case while typing
using CSS/JavaScript ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color: green">
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 20px; font-weight: bold;">
Type in the input box in lower
case to see the effect.
</p>
Type Here: <input id="yourid" type="text" />
<br><br>
<script>
$(function() {
$('input').keyup(function() {
this.value = this.value.toLocaleUpperCase();
});
});
</script>
</body>
</html>
Producción:
- Antes de escribir en el cuadro de entrada:
- Después de escribir letras minúsculas en el cuadro de entrada:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA