Jump to content
Kefatif

Input restrito a números com caracteres limitados [RESOLVIDO]

Recommended Posts

Prezados, boa tarde.

 

Sou novo no fórum, peço desculpas caso esteja postando no local errado.

 

Estou precisando que o edit abaixo receba apenas valores numéricos e no máximo 15 caracteres, poderiam me ajudar, por gentileza?

 

<label style="width:14.4%">TESTE<br><input type="text" step="0.1" name="teste" class="form-control" style="width:100%"></label>

 

Já tentei diversas formas e não consegui.

 

Obs.: Sou iniciante em programação web.

 

Agradecido desde já pelas ajudas que estão por vir.

 

Muito obrigado!!!

Share this post


Link to post
Share on other sites
<!-- Usando expressão regular -->
<input
    type="text"
    pattern="([0-9]+)"
    maxlength="15"
/>

<!-- Com uso de máscara -->
<input
    type="text"
    maxlength="15"
    onkeypress="mascara(this, inteiro)"
    onblur="clearTimeout()"
/>


<script>
    var input, tecla;

    function mascara(i, t) {
        window.input = i;
        window.tecla = t;
        setTimeout('chave()', 1);
    }

    function chave() {
        window.input.value = window.tecla(window.input.value);
    }

    function inteiro(v) {
        v = v.replace(/\D/g, '');
        return v;
    }
</script>

 

Share this post


Link to post
Share on other sites
7 horas atrás, Omar~ disse:

<!-- Usando expressão regular -->
<input
    type="text"
    pattern="([0-9]+)"
    maxlength="15"
/>

<!-- Com uso de máscara -->
<input
    type="text"
    maxlength="15"
    onkeypress="mascara(this, inteiro)"
    onblur="clearTimeout()"
/>


<script>
    var input, tecla;

    function mascara(i, t) {
        window.input = i;
        window.tecla = t;
        setTimeout('chave()', 1);
    }

    function chave() {
        window.input.value = window.tecla(window.input.value);
    }

    function inteiro(v) {
        v = v.replace(/\D/g, '');
        return v;
    }
</script>

 

Bom dia, @Omar~.

 

Em primeiro lugar, muito obrigado pela resposta!

 

Nos dois casos ele limitou a quantidade de caracteres, porém continuou aceitando letras. Alguma outra dica?

 

Grato desde já.

Share this post


Link to post
Share on other sites

Prezados, bom dia.

 

Voltei para deixar registrado a solução da minha dúvida para servir de consulta a outros que possam vir a precisar.

segue abaixo o código para limitar a quantidade de caracteres em um input do tipo number.

<input name="teste"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "15"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>

Share this post


Link to post
Share on other sites

Por que não usa no lugar do type="text" colocar type="number"

 

Ou então tente usar assim

 

Vamos garante que apenas números sejam inseridos num input do tipo text em um formulário qualquer.
Módelo 01

<script>
  function onlynumber(evt) {
   var theEvent = evt || window.event;
   var key = theEvent.keyCode || theEvent.which;
   key = String.fromCharCode( key );
   //var regex = /^[0-9.,]+$/;
   var regex = /^[0-9.]+$/;
   if( !regex.test(key) ) {
      theEvent.returnValue = false;
      if(theEvent.preventDefault) theEvent.preventDefault();
   }
}
</script>

Já no campo input você coloca assim onkeypress=’return onlynumber();’

<!-- Lembre que desta forma ele vai apenas permite somente números sem letras nem nada mais que apenas os numeros-->
<label style="width:14.4%">TESTE<br>
  <input type="text" step="0.1" maxlength="15" onkeypress="return onlynumber();" name="teste" class="form-control" style="width:100%">

</label>

Outra forma que você também pode usar um código inline dentro do input para permitir apenas números sem que digite letras etc...

 

<!-- Lembre que desta forma ele também vai aceitar apenas números sem letras nem nada mais-->
<label style="width:14.4%">TESTE<br>
  <input type="text" step="0.1" maxlength="15" onkeypress="return event.charCode >= 48 && event.charCode <= 57" name="teste" class="form-control" style="width:100%">

</label>

Obs:
Você pode usar no type do input o valor number ( type=”number” )
 porém, ele não é totalmente aceito e normatizado nos navegadores, além de permitir o caracter “e” 
 entre os números. 
 Ao usar “number” você pode ter problemas ao selecionar o valor via jQuery com: jQuery( ‘.input_type_number’ ).val(); .
 

Share this post


Link to post
Share on other sites
2 horas atrás, Jack Oliveira disse:

Por que não usa no lugar do type="text" colocar type="number"

 

Ou então tente usar assim

 

Vamos garante que apenas números sejam inseridos num input do tipo text em um formulário qualquer.
Módelo 01


<script>
  function onlynumber(evt) {
   var theEvent = evt || window.event;
   var key = theEvent.keyCode || theEvent.which;
   key = String.fromCharCode( key );
   //var regex = /^[0-9.,]+$/;
   var regex = /^[0-9.]+$/;
   if( !regex.test(key) ) {
      theEvent.returnValue = false;
      if(theEvent.preventDefault) theEvent.preventDefault();
   }
}
</script>

Já no campo input você coloca assim onkeypress=’return onlynumber();’


<!-- Lembre que desta forma ele vai apenas permite somente números sem letras nem nada mais que apenas os numeros-->
<label style="width:14.4%">TESTE<br>
  <input type="text" step="0.1" maxlength="15" onkeypress="return onlynumber();" name="teste" class="form-control" style="width:100%">

</label>

Outra forma que você também pode usar um código inline dentro do input para permitir apenas números sem que digite letras etc...

 


<!-- Lembre que desta forma ele também vai aceitar apenas números sem letras nem nada mais-->
<label style="width:14.4%">TESTE<br>
  <input type="text" step="0.1" maxlength="15" onkeypress="return event.charCode >= 48 && event.charCode <= 57" name="teste" class="form-control" style="width:100%">

</label>

Obs:
Você pode usar no type do input o valor number ( type=”number” )
 porém, ele não é totalmente aceito e normatizado nos navegadores, além de permitir o caracter “e” 
 entre os números. 
 Ao usar “number” você pode ter problemas ao selecionar o valor via jQuery com: jQuery( ‘.input_type_number’ ).val(); .
 

 

Muito obrigado @Jack Oliveira.

 

Realmente não havia notado que o "e" estava passando.

 

Utilizei o primeiro método que você mencionou e deu certo de primeira!

 

Muitíssimo obrigado! 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Anonm
      Gostaria de colocar em cada variável a ordem de um numero que o usario digitar, mas que os valores sejam absolutos e n relativos.
      Por exemplo, se o usuário colocar 110, o programa vai colocar na variável und o valor da unidade, na variável dez o valor das dezenas, e na variável cen o valor das centenas, ficando:
      und=0
      dez=1
      cen=1
      mas o limite deve ser da casa do bilhão, ou seja, o usuário pode colocar ate 9 bilhões que ainda vai colocando o valor das ordens nas variáveis.
      Como pode ser feito? 
    • By PToledo
      Gostaria de uma ajuda.
       
      Tenho um input que receberá valor em reais. Porém no momento da digitação o campo não pode permitir valor menor que 100,00 reais
      como posso fazer isso?
    • By Raphael Beghelli Ribeiro
      Prezados,

      Tenho um formulário de busca, onde um INPUT recebe informações de um Banco de Dados.
      No Android, esta tudo funcionando 100%. Porém, no IoS, ele só marca o primeiro item da lista de busca.
      <div id="local"> <font>QUAL BAIRRO, CIDADE OU CÓDIGO?</font> <input name="psqm" id="psqm" type="text" placeholder="DIGITE O BAIRRO, A CIDADE OU O CÓDIGO" autocomplete="off" /> </div> Após preencher todos os campos anteriores, tento digitar por exemplo: Jardim

      na listagem, aparece:
      Jardim América;
      Jardim Santa Lucia;
      Jardim Santos;
      Outros...
       
      Independente de onde clicar, apenas o primeiro item ("Jardim América") é selecionado.

      Alguma dica? Lembrando que este erro é apenas no iPhone.
    • By mpcarvalho
      Possuo pouco conhecimento em JS, então gostaria de solicitar uma ajuda com um script que montei para resgatar imagens de produtos de um determinado site/ecommerce utilizando o EAN do produto.
       
      No código abaixo eu passo via form alguns parametros como a URL do site onde quero pesquisar a imagem com "/" e na sequência o campo EAN com todos os códigos de barra que quero pesquisar separados por "," e por ultimo a extensão do arquivo de acordo com a extensão que o site em questão utiliza, jpg ou png. No final tudo será exibido na div dl_imgs e ai então eu posso dar um ctrl + s no meu navegador e salvar todas as imagens de uma vez. 
       
      O objetivo do FOR é retornar imagem por imagem utilizando os parametros URL + EAN + EXT. Ex: "ecommerce.com.br/imagens/000030201.png".
       
      O que acontece é que preencho o campo EAN com todos os códigos de barras que preciso separados por virgula, mas o script não consegue montar o array e me retorna algo parecido com isso: https://cdn-*******.*******.com.br/products/7896003703863,7897005100223,7897005101589,7896360210097,7896003703863,7897005100223,7897005101589
       
      Como podem ver me trás apenas uma imagem que não existe pois não separou os códigos de barra na matriz. Porem se eu copiar esses mesmos códigos e colocar direto na VAR MATRIZ, o script funciona. 
       
      Segue abaixo o script utilizado. Desde já agradeço!
       
      <script>
              function loadImgs(){
                /*--- Dados do formulário ---*/
                var dataform = document.forms[0] || document.forms['dados'];
                //var t = dataform.imgtotal.value;
                var url = dataform.url.value;
                var ext = dataform.ext.value;
                var ean = dataform.ean.value;
                dataform.buscar.disabled = true;
                  
                /*--- Gerar IMGS ---*/
                var div = document.getElementById('dl_imgs') || document.dl_imgs;
                div.innerHTML = "";

                novoArray = ean.split(',');
                var matriz = [novoArray];
                  
               for(var i=0; i<matriz.length; i++) {
                     div.innerHTML += '<img src="'+url+""+matriz+''+ext+'" />';
               }
      }
      </script>
       
      PS: Para melhorar ainda mais essa extração, eu gostaria de fazer isso fazendo um UPLOAD de um arquivo XLS contendo 2 colunas EAN e Nome produto, e no final exibir a imagem e abaixo o nome do produto, se alguém puder me dar uma luz de como fazer isso agradeço. Att;
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.