Input que só aceita número e pode usar em qq projeto e framework no front

Olá, Emerson

Primeiramente, é importante destacar que o tipo number do HTML5 é uma boa opção, mas ele pode apresentar comportamentos diferentes dependendo do navegador, como as setas para incrementar e decrementar valores, que você mencionou.

Uma solução mais controlada seria usar um campo de texto comum (type="text") e controlar a entrada de dados por meio de JavaScript ou uma diretiva, se estiver usando Angular, por exemplo. Aqui está um exemplo simples de como você pode fazer isso:

1. HTML Puro com JavaScript:

   <input id="numInput" type="text" placeholder="Digite apenas números" oninput="validateInput(this)">
   <script>
     function validateInput(input) {
       input.value = input.value.replace(/[^0-9]/g, '');
     }
   </script>
   

   Neste exemplo, sempre que o usuário tentar inserir um valor no input, a função validateInput é chamada, removendo qualquer caractere que não seja um número.

2. Angular com Diretiva: Se você estiver usando Angular, pode criar uma diretiva personalizada para reutilizar em diferentes projetos. Aqui está um exemplo básico de como você poderia implementar isso:

   import { Directive, HostListener } from '@angular/core';
   
   @Directive({
     selector: '[appOnlyNumbers]'
   })
   export class OnlyNumbersDirective {
   
     @HostListener('input', ['$event'])
     onInputChange(event) {
       const initalValue = event.target.value;
       event.target.value = initalValue.replace(/[^0-9]/g, '');
       if (initalValue !== event.target.value) {
         event.stopPropagation();
       }
     }
   }
   

   E no seu HTML:

   <input type="text" appOnlyNumbers>
   

   Essa diretiva pode ser adicionada a qualquer input para garantir que apenas números sejam aceitos.

Ambas as soluções devem ajudar a garantir que o input aceite apenas números e podem ser adaptadas conforme necessário para se encaixar em diferentes projetos e frameworks. Espero que uma dessas soluções seja útil para você!

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!