Como fazer type = "number" apenas para números positivos

atualmente eu tenho o seguinte código

<input type="number" />

sai para algo assim

As pequenas coisas do seletor à direita permitem que o número fique negativo. Como evito isso?

Estou com dúvidas sobre o uso type="number", está causando mais problemas do que está resolvendo, vou verificar a sanidade de qualquer maneira, então devo voltar a usar type="text"?

Adicionar um minatributo

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

Eu encontrei outra solução para evitar número negativo.

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

Depende da precisão que você deseja ser. Você deseja aceitar apenas números inteiros que:

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

Se você deseja carros alegóricos com, por exemplo, dois dígitos após o ponto decimal:

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

Você pode forçar a entrada a conter apenas um número inteiro positivo adicionando onkeypressna inputtag.

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

Aqui, event.charCode >= 48garante que apenas números maiores ou iguais a 0 sejam retornados, enquanto a mintag garante que você possa chegar a um mínimo de 1 rolando na barra de entrada.

Você pode usar o seguinte para type="number"aceitar somente números positivos:

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

Você pode impedir a entrada negativa em um formulário de entrada de número da seguinte forma:

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

Experimentar

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

Se precisar de entrada de texto , o padrão também funciona

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

Não consigo encontrar a solução perfeita, pois alguns funcionam para inserir, mas não para copiar e colar, alguns são o contrário. Esta solução funciona para mim. Evita que o número negativo seja digitado "e", copie e cole o texto "e".

crie uma função.

<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>

adicione essas propriedades à entrada. esses dois impedem de copiar e colar texto não numérico, incluindo "e". você precisa ter os dois juntos para entrar em vigor.

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

Se você estiver usando o Vue, pode consultar esta resposta aqui . Eu o extraí para um mixin que pode ser reutilizado.

adicione este código no seu tipo de entrada;

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

por exemplo:

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

Outra solução é usar Js para torná-lo positivo (a opção min pode ser desativada e não é válida quando o usuário digita smth) O evento negativo se não for necessário e ativado ('keydown') também pode ser usado!

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

Depende se você deseja um campo int ou float. Aqui está a aparência dos dois:

<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">

O campo int possui a validação correta anexada, pois seu mínimo é 1. O campo flutuante aceita 0, no entanto; Para lidar com isso, você pode adicionar mais um validador de restrição :

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);

JSFiddle aqui.

Observe que nenhuma dessas soluções impede completamente o usuário de digitar uma entrada inválida, mas você pode ligar checkValidityoureportValidity descobrir se o usuário digitou uma entrada válida.

Obviamente, você ainda deve ter a validação do lado do servidor porque o usuário sempre pode ignorar a validação do lado do cliente.

Tente o seguinte:

• Testado em Angular 8
• valores são positivos
• Este código também fornece null e negitivevalores.

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

Se você tentar inserir um número negativo, o evento onkeyup bloqueará isso e, se você usar a seta no número de entrada, o evento onblur resolverá essa parte.

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

Com o tipo de texto de entrada, você pode usá-lo para uma melhor validação,

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

Tente o seguinte:

Yii2 : Validation rule 

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