Javascript Não permitir inserir e salvar números negativos no input do Vue.js

[AlefSilva96]

Sei que a propriedade min = "0" ajuda até certo ponto... pois ele resolve apenas uma parte do que eu quero...

 

Ele realmente bloqueia setar números negativos, mas isso somente se usar o seletor do input do tipo number

 

Agora ele não resolve o problema em casos onde o usuário queira digitar na mão. Se eu digito -1 no input, ele entra normal e ainda salva o formulário

Eu gostaria que não fosse possível insirir na mão também, se eu colocar -1, já aparecer um alerta do tipo "Não é permitido número negativo"

[GabrielSennaMs]

@AlefSilva96 Tem varias maneira de você resolver isso.

 

,Um dela é fazer a verificação do valor digitado pelo usuário

    <input id="inputNumber" type="number" min="0">
    <script>
        window.onload = function()
        {
            document.getElementById('inputNumber').addEventListener('keydown', function(event)
            {
                if (!Math.sign(event.key))
                {
                    event.preventDefault();
                }
            });
        }
    </script>

 

Nesse exemplo ele bloqueia qualquer valor que não for um número isso inclui o simbolo "-", assim ele não pode inserir nenhum valor negativo.

 

Obs..:Isso não vai impedir ele de alterar o valor no debug do navegador.

 

[AlefSilva96]

@GabrielSennaMs Então, mas aí ele bloqueia todas as teclas que não seja um número e eu não gostaria que comportasse dessa maneira, até o backspace não funciona caso eu queira apagar alguma coisa que digitei errado, e esse código está parecendo JS puro, e eu gostaria de uma implementação em Vue.js

[GabrielSennaMs]

@AlefSilva96Bom se você vai usar vue.js, você pode usar algum plugin de mask, como esse aqui:

https://vuejs-tips.github.io/vue-the-mask/.

[AlefSilva96]

@GabrielSennaMs Eu encontrei uma solução simples sem uso de máscaras ou scripts JS

Basta inserir isso no input:

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

 

Ele bloqueia o sinal de ( - ) negativo quando o usuário tenta inserir, além de deixar o valor mínimo como zero, sendo assim impossível qualquer tentativa de inserir números abaixo de zero

[Matheus de Oliveira Andrad]

@GabrielSennaMs no caso o numero precisa ser apagado, então poderia ficar: 

 

  document.querySelector("#input-number").addEventListener("keydown", function (event) {

    if (!Math.sign(event.key) &&  (event.key !== "Backspace")) {

      event.preventDefault();

    }

  });