Cómo hacer que type = “number” solo a números positivos

actualmente tengo el siguiente código

<input type="number" />

se trata de algo como esto

Las pequeñas cosas del selector a la derecha permiten que el número entre en negativo. ¿Cómo evito eso?

Tengo dudas sobre el uso type="number", está causando más problemas de los que está resolviendo, de todos modos voy a revisar la sanidad, ¿debería volver a usarlo type="text"?

Agregar un minatributo

<input type="number" min="0">

He encontrado otra solución para evitar el número negativo.

<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">

Depende de cuán preciso quieras ser. Si desea aceptar solo enteros, que:

<input type="number" min="1" step="1">

Si desea flotadores con, por ejemplo, dos dígitos después del punto decimal:

<input type="number" min="0.01" step="0.01">

Puede forzar la entrada para que contenga solo enteros positivos agregando onkeypressdentro de la inputetiqueta.

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

Aquí, se event.charCode >= 48garantiza que solo se devuelvan números mayores o iguales a 0, mientras que la minetiqueta garantiza que puede llegar a un mínimo de 1 desplazándose dentro de la barra de entrada.

Puede usar lo siguiente para type="number"aceptar solo números positivos:

input type="number" step="1" pattern="\d+"

Puede evitar la entrada negativa en forma de entrada numérica de la siguiente manera:

<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">

Tratar

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

Si necesita ingresar texto , el patrón también funciona

<input type="text" pattern="\d+">

No puedo encontrar la solución perfecta ya que algunos funcionan para ingresar pero no para copiar y pegar, algunos son al revés. Esta solución me funciona. Impide el número negativo, escribiendo "e", copia y pega el texto "e".

crear una función

<script language="JavaScript">

  // this prevents from typing non-number text, including "e".
  function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    let charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
      evt.preventDefault();
    } else {
      return true;
    }
  }
</script>

agregue estas propiedades a la entrada. estos dos impiden copiar y pegar textos que no sean números, incluida "e". necesitas tener ambos juntos para que surtan efecto.

<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />

Si está utilizando Vue , puede consultar esta respuesta aquí . Lo he extraído en un mixin que se puede reutilizar.

agregue este código en su tipo de entrada;

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

por ejemplo:

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

Otra solución es usar Js para hacerlo positivo (la opción min se puede deshabilitar y no es válida cuando el usuario escribe smth) ¡También se puede usar el evento negativo si no es necesario y encendido ('keydown')!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});

Depende de si desea un campo int o flotante. Así es como se verían los dos:

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

El campo int tiene la validación correcta adjunta, ya que su mínimo es 1. Sin embargo, el campo flotante acepta 0; Para lidiar con esto, puede agregar un validador de restricción más :

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

JS Violín aquí.

Tenga en cuenta que ninguna de estas soluciones impide por completo que el usuario intente escribir una entrada no válida, pero puede llamar checkValidityoreportValidity averiguar si el usuario ha ingresado una entrada válida.

Por supuesto, aún debe tener la validación del lado del servidor porque el usuario siempre puede ignorar la validación del lado del cliente.

Prueba esto:

• Probado en Angular 8
• los valores son positivos
• Este código también maneja nully negitivevalora.

              <input
                type="number"
                min="0"
                (input)="funcCall()" -- Optional
                oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
                formControlName="RateQty"
                [(value)]="some.variable" -- Optional
              />

Si intenta ingresar un número negativo, el evento onkeyup lo bloquea y si usa la flecha en el número de entrada, el evento onblur resuelve esa parte.

<input type="number" 
    onkeyup="if(this.value<0)this.value=1"
    onblur="if(this.value<0)this.value=1"
>

Con el tipo de entrada de texto puede usar esto para una mejor validación,

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();

Prueba esto:

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}