tengo una inquietud lo que pasa que estoy desarrollando una interfaz donde el usuario insertara en un input un porcentaje y lo que deseo hacer es que el input en automático me agregue el % después de que se inserten los dígitos o si tiene ya el % lo mantenga no se si me di a entender, Gracias, Saludos.
2 respuestas
Puedes valerte de los eventos del input
; por ejemplo, el evento onchange
se dispara cuando se abandona el elemento, siempre que su valor haya cambiado mientras mantuvo el foco.
En la función que se llama al disparar el evento, en el ejemplo a continuación, evalúo si hay algún contenido en el input, y si lo hay, si el último caracter es un %
. Si no lo es, se lo agrego.
document.body.innerHTML = `
<form>
<div>
<label for="numero">Porcentaje</label>
<input id="numero">
<button type="submit">procesar</button>
</div>
</form>
`;
//primero, necesitamos una referencia al input
let numInput = document.getElementById('numero');
numInput.addEventListener('change',()=>{
console.log("evaluando");
let contenido = numInput.value;
if (contenido!='') {
if (contenido.slice(-1)!='%') {
console.log("agregando %");
numInput.value = contenido + '%';
}
} else {
console.log("vacío");
}
});
El código de la vida real debiera ser, probablemente, más robusto en el sentido de agregar el símbolo solo si se ingresó un número válido, por ejemplo... lo que se acomode a tu caso de uso ya depende de las particularidades del mismo.
-
Gracias jachguate, creo si utilizare esta solucion el manejo de eventos, se acomoda a mi proyectos gracias– BenjaminCommented el 26 abr. 2021 a las 13:20
Si lo que quieres es dejar el valor del porcentaje en el input puedes probar dejando el signo porcentaje en el value