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 Mauricio Molina
      Ola pessoal,
       
      Alguém pode me orientar?
       
      Estou com um campo textarea que esta chamando o editor CKEDITOR, pelo name="txtArtigo"
       
      Meu problema é que para enviar os dados para o banco, também usa o name="desc_imc"
       
      Deve ser algo fácil, mas sou iniciante e me perco em algumas coisas.
       
      <div role="tabpanel" class="tab-pane active" id="descricao_imc"> <div style="padding-top:20px;"> <form method="post" action="cadastrar_descricao.php"> <textarea id="desc_imc" type="text" name="txtArtigo"></textarea><br> <input class="btn btn-outline-success" type="submit" value="Cadastrar" name="button" /> <script src="ckeditor/ckeditor.js"></script> <script>CKEDITOR.replace( 'txtArtigo' );</script> </div> </div>  
    • By SilverFV
      Bom dia,
      Gostaria de pedir ajuda pois não acho nada que me ajude no que estou querendo fazer.
      Eu quero que o usuario insira um valor em um input e ao clicar em um botão ira sera inserido no formulario a quantidade de input Text igual ao valor digitado e então ele colocaria um valor em cada um desses inputs e somaria e retornaria o valor em um popup ou em uma outra parte do formulario, mas só somaria se nenhum deles estivesse vazio(essa parte da soma é a mais fácil) e caso ele coloque o valor 0 ou aperte um botão limpar os inputs inseridos seriam deletados.
       
      - Att
    • By guilhermewebber
      Olá, eu to com uma duvida para conseguir trazer um dado do banco pra uma input. Tenho o seguinte código
       
       <input class="form-control" type="text" readonly>                 <?php                 $sql2 = "select Codigo, SaldoAtual from saldo";                 $conexao2 = new Conexao2();                 $saldos = $conexao2 -> execute($sql2);                   while($saldo = $saldos ->fetch_array()) {                   echo '<option value="'.$saldo['Codigo'].'"> '.$saldo['SaldoAtual'].' </option>';                 }                 ?>                 </select>
    • By Pitag346
      Pessoal, alguem me ajuda...
       
      Como consigo fazer com que um SELECT, adicione campos ao meu formulário....
       
      Tenho um SELECT onde existe a quantidade, esse select tem de 1 a 3 .... Por padrão ele é definido como 1 ou seja 1 campo...
      Gostaria de adicionar campos conforme essa quantidade, se o select estiver com o NUMERO 2... Adiciona 2 campos, se tiver 3 ele adiciona 3 campos e se tiver 1, apenas 1 campo.
       
       
      Alguem conseguiria me ajudar ? tentei fazer com a propriedade FOR porem... ela me retorna sempre mais campos do que eu preciso realmente. Obrigado.
    • 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? 
×

Important Information

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