Hola,
Si requieren que un input en React JS, solo permita ingresa caracteres numéricos en el campo, pueden utilizar la siguiente forma y espero que les sirva.
El código de la función completa es:
/** declaracion de variables */
const [inputText, setInputText] = useState('');
/**
* Función interna encargada de validar que en el input para inputText solo permita ingresar numeros enteros positivos y el cero.
* Funciona para el navegador Google Chrome como el Mozilla Firefox, puesto que el type="number", ya no es soportado en Mozilla Firefox.
* Se usa con el evento onChange, puesto que este detecta cada vez que cambia el valor del elemento de entrada (input).
*/
function handleChangeInputText(numberInputText){
console.log("Inicio function handleChangeInputText(), valor original del campo inputText:");
console.log(inputText);
console.log("Los caracteres del campo son: ");
const numberValue = numberInputText.target.value;
console.log(numberValue);
console.log("El tamaño es:");
console.log(numberValue.length);
if(numberValue.length==1) {
// primer caracter
//obtener el valor ingresado en el campo como codigo Ascii
const numberCodeAscii = numberValue.charCodeAt(0);
console.log("El valor ASCII del caracter ingresado en la posicion #1 es: ");
console.log(numberCodeAscii);
/** validaciones */
if (numberCodeAscii==8) {
// backspace.
console.log("La tecla presionada es backspace.");
} else if (numberCodeAscii>=48 && numberCodeAscii<=57) {
// is a number.
console.log("La tecla presionada si es un numero.");
setCodInputText(numberValue);
} else {
// other keys.
console.log("La tecla presionada no es un numero.");
const noNumber = numberValue.substr(0, (numberValue.length)-1);
console.log("Se conservara en el campo el caracter:");
console.log(noNumber);
setCodInputText(noNumber);
}
} else if(numberValue.length==2){
// segundo caracter
//obtener el segundo valor ingresado en el campo como codigo Ascii
const numberCodeAscii1 = numberValue.charCodeAt(1);
console.log("El valor ASCII del caracter ingresado en la posicion #2 es: ");
console.log(numberCodeAscii1);
/** validaciones */
if (numberCodeAscii1==8) {
// backspace.
console.log("La tecla presionada es backspace.");
} else if (numberCodeAscii1>=48 && numberCodeAscii1<=57) {
// is a number.
console.log("La tecla presionada si es un numero.");
setCodInputText(numberValue);
} else {
// other keys.
console.log("La tecla presionada no es un numero.");
const noNumber = numberValue.substr(0, (numberValue.length)-1);
console.log("Se conservara en el campo el caracter:");
console.log(noNumber);
setCodInputText(noNumber);
}
} else {
// tercer caracter
//obtener el segundo valor ingresado en el campo como codigo Ascii
const numberCodeAscii1 = numberValue.charCodeAt(2);
console.log("El valor ASCII del caracter ingresado en la posicion #3 es: ");
console.log(numberCodeAscii1);
/** validaciones */
if (numberCodeAscii1==8) {
// backspace.
console.log("La tecla presionada es backspace.");
} else if (numberCodeAscii1>=48 && numberCodeAscii1<=57) {
// is a number.
console.log("La tecla presionada si es un numero.");
setCodInputText(numberValue);
} else {
// other keys.
console.log("La tecla presionada no es un numero.");
const noNumber = numberValue.substr(0, (numberValue.length)-1);
console.log("Se conservara en el campo el caracter:");
console.log(noNumber);
setCodInputText(noNumber);
}
}
console.log("Fin function handleChangeInputText()...");
}//Fin funcion handleChangeInputText()
La invocación de esta función en el Input es:
return(
<Form.Field required>
<label>Valor numérico:</label>
<Input type="text" value={inputText} onChange={e => setInputText(e.target.value)} onChange={handleChangeInputText} maxLength = "3" placeholder="Ingrese un valor numérico..." name="inputText" id="inputText Input" min = "0" max = "999" autoComplete="off" />
</Form.Field>
)
El código anterior funciona de la siguiente manera para el campo inputText, almacena el valor del campo de entrada inputText dentro del valor de estado setInputText(), en el segundo método onChange() invoca la función y valida que está solo permita ingresar caracteres numéricos y la tecla de borrar (backspace) y solo permite ingresar tres caracteres numéricos, sin auto completarlos.
Nota:
Obviamente esta función se puede optimizar mucho mejor, para no tener tanto código repetido, pero para iniciar, entenderlo y trabajarlo, lo realice así, puesto que no soy muy bueno en JS y menos en React JS.
Basado en:
0 comentarios :
Publicar un comentario