TransWikia.com

¿Cómo validar solo 2 decimales en un input en tiempo real?

Stack Overflow en español Asked by Luis Enrique Gómez Pérez on February 7, 2021

Tengo un input en el cual quiero validar que no se le pueda escribir mas de 2 decimales

<input id={"IDpayvalue"} name={"payvalue"} onChange={e => this.onChangePayMount(e, index)} type="number" className="form-control-sm col-sm-6"  min="1" step="0.01"></input>

En la funcion quiero que se valide que no se pueda escribir mas de 2 decimales en el input pero no se como, hasta ahora solo puedo validar que cuando se cumple la condición y se guarda en cap pero no se como hacer que en el input no se puedan escribir mas de 2 decimales

onChangePayMount(e, index){
    var cap = e.target.value;
    var patron = Number.parseFloat(e.target.value).toFixed(2);
    console.log(patron);
    cap = patron;
    }
}

Ya puedo hacer que cap guarde solo 2 decimales pero no se como hacer que el input no se pueda escribir mas de 2 digitos decimales

One Answer

Si quieres forzar a que el valor siempre tenga dos decimales, puedes hacer:

onChangePayMount(e) {
    e.target.value = Number.parseFloat(e.target.value).toFixed(2);
}

Con:

<input id={"IDpayvalue"} name={"payvalue"} onChange={this.onChangePayMount} type="number" className="form-control-sm col-sm-6"  min="1" step="0.01"></input>

Pero es un poco agresivo con el usuario, algo más amigable sería usar:

onChangePayMount(e) {
    e.target.value = Number.parseFloat(e.target.value).toFixed(2);
}

Con:

<input id={"IDpayvalue"} name={"payvalue"} onBlur={this.onChangePayMount} type="number" className="form-control-sm col-sm-6"  min="1" step="0.01"></input>

De esta manera el valor se corrige luego de que el input deja de ser usado y por lo tanto el usuario puede digitar el número que quiera, sin que se le corrija instantáneamente.

Answered by FranAcuna on February 7, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP