En tu HTML le puse un id a tu input con
id="quantity"
Esto para agregar el evento keypress desde javascript
document.getElementById('quantity').addEventListener('keypress', function(evt) {
if (filterInteger(evt, evt.target) === false) {
evt.preventDefault();
}
});
El evento ejecuta la función filterInteger para filtrar sólo los caracteres permitidos según la tabla ASCII https://elcodigoascii.com.ar/
Aquellos caracteres que no cumplan con el filtro se cancela el evento con
evt.preventDefault();
Lo cual sólo deja escribir números enteros positivos en el input.
En la funcion filterInteger se detalla los caracteres permitidos y necesarios.
Código completo
function filterInteger(evt,input) {
// ASCII https://elcodigoascii.com.ar/
// ‘0′ = 48, ‘9′ = 57, ‘-’ = 45
// Backspace = 8, Enter = 13, NULL = 0
var key = window.Event ? evt.which : evt.keyCode;
var chark = String.fromCharCode(key);
var tempValue = input.value+chark;
if((key >= 48 && key <= 57) /* || key == 45 */) {
return filter(tempValue);
} else {
return key == 8 || key == 13 || key == 0;
}
}
function filter(__val__) {
// /^-?[0-9]*$/; // positivos y negativos
// /^[0-9]*$/; // solo positivos
var preg = /^[0-9]*$/;
return preg.test(__val__);
}
document.getElementById('quantity').addEventListener('keypress', function(evt) {
if (filterInteger(evt, evt.target) === false) {
evt.preventDefault();
}
});
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="number" min="1" step="1" class="form-control" id="quantity" aria-label="Amount" name="quantity" placeholder="Cantidad" inputmode="numeric" pattern="[0-9]*">
</body>
</html>