Quiero poder poner una longitud máxima para el número de teléfono ingresado y no permitir ningún carácter también. Sin embargo, con el formato a continuación, limita a la persona a ingresar 10 caracteres, pero también permite agregar cualquier otro carácter.
Ahora, si cambio el type a type="number" , maxLength no funcionará y también los caracteres como [menos (-) o más (+)] seguirán pasando.
¿Cómo puedo hacer que mi entrada se limite a un máximo de 10 números y no permita ningún carácter?
<input placeholder="Telephone Number" className="input_fields telephone_no" type="tel" maxLength={"10"} name="phoneNumber" id="teacher_telephone_no" value={this.state.user.phoneNumber} onChange={e => this.setState({ user: { ...this.state.user, [e.target.name]: e.target.value } }) } />Puede usar una expresión regular y un evento keyup para evitar que se escriba el símbolo.
let input = document.querySelector('input') input.onkeyup = function() { input.value = input.value.replace(/[^\d]/, "") } <input placeholder="Telephone Number" className="input_fields telephone_no" type="tel" maxLength={ "10"} name="phoneNumber" id="teacher_telephone_no" />Puede usar regex para probar su entrada antes de establecer el estado, como:
<input placeholder="Telephone Number" className="input_fields telephone_no" type="tel" maxLength={"10"} name="phoneNumber" id="teacher_telephone_no" value={user} onChange={(e) => { if (/^[0-9]{1,10}$/.test(e.target.value)) { this.setState({ user: { ...this.state.user, [e.target.name]: e.target.value } }) } }} />