5

quisiera saber como puedo hacer para que un input de tipo number solo se puedan ingresar numeros positivos, tengo un campo en un formulario de la siguiente forma:

<input type="number" min="1" pattern="^[0-9]+" class="form-control custom-select"  placeholder="USD Desde" formControlName="precio_min">

pero el problema es que me deja ingresar caracteres como el signo negativo o guion dejando formar un numero negativo. Por ejemplo, en este pagina: [compreoalquile.com][1]

[1]: https://www.compreoalquile.com/ en los input precio, solo deja ingresar numeros, si intentas escribir el guion o signo negativo simplmente no se escribe. como podria lograr eso? estoy usando angular y formularios reactivos. alguien puede ayudarme? gracias de antemano.

3
  • en el type no es numeric, es number, con respecto a que no se ingresen numeros negativos, deberias colocar un metodo que evalue el evento keydown y compare el keycode, para que solo permita los key code los numeros naturales Commented el 9 ago. 2019 a las 4:11
  • Gracias por responder, acabo de editar y coloque "number". Estoy viendo la documentacion y veo que existe el Keyup, pero como seria en la parte del evento la validacion, para simplemente no mostrar en el input el signo negativo si el usuaio lo llegara a teclear? algo asi como en la pagina de ejemplo que deje en mi pregunta.
    – JulianProg
    Commented el 9 ago. 2019 a las 4:23
  • 1
    La pregunta ya estaba en español que es el idioma de la plataforma, ¿por qué la pusiste en inglés?, revertí tu edición pues veo que llevas tiempo en la plataforma y has publicado en español, te recomiendo no publiques en otro idioma o tu pregunta será cerrada.
    – user128299
    Commented el 9 ago. 2019 a las 5:03

3 respuestas 3

4

Veo que tu input tiene el atributo formControlName, así que asumo que estás usando formularios reactivos. En ese caso, en la declaración de campos puedes añadir validaciones.

formBuilder.group( {
  // ... otros campos
  ['', Validators.min(0)], //que sea 0 o más
  ...
}
3

En los inputs tienes un atributo propio denominado "onkeypress" para precisamente comprobar los caracteres introducidos.

Sería algo así:

<input type="number" onkeypress="return event.charCode >= 48" min="1" >

Con eso controlas que solo se puedan introducir números enteros positivos. La etiqueta min="1" te asegura que con los botones de subir y bajar en el input sólo puedas seleccionar como mínimo el valor 1 que también puede ser 0 si lo deseas.

3
  • Onkeypress es un evento propio de los inputs no? O dime dónde puedo consultar qué es parte de HTML5 ?
    – user128299
    Commented el 9 ago. 2019 a las 7:30
  • Efectivamente, es un atributo de los inputs soportado a partir de HTML5. Quizás no me he expresado del todo bien.
    – MrSman
    Commented el 9 ago. 2019 a las 7:40
  • Hola @MrSman tu respuesta me sirvio perfectamente. aunque tengo una duda de como funciona. entiendo que el evento onkeypress es para saber que tecla presionp y charCorde es para saber el valor ascii de ese caracter, pero no entiendo en que parte de esa funcion se hace la parte para que no lo muestre, entiendo que si es >= 48 quiere decir que es un numero, si es falso simplemente no se muestra pero donde se valida esa parte de que si es falso no muestra el caracter en el input?
    – JulianProg
    Commented el 9 ago. 2019 a las 13:44
2

Otra posible solución es usar el atributo oninput para calcular el máximo entre 1 (tu valor mínimo) y el valor insertado.

<input type="number" min="1" pattern="^[0-9]+" class="form-control custom-select"  placeholder="USD Desde" formControlName="precio_min" oninput="this.value = Math.max(this.value, 1)">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.