Ir para conteúdo
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!!!

Compartilhar este post


Link para o post
Compartilhar em outros 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>

 

Compartilhar este post


Link para o post
Compartilhar em outros 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á.

Compartilhar este post


Link para o post
Compartilhar em outros 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>

Compartilhar este post


Link para o post
Compartilhar em outros 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(); .
 

Compartilhar este post


Link para o post
Compartilhar em outros 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! 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por GOD
      Quero pegar o dado:
      CHEGADA e SAÍDA do form 1 e colocar para ser exibido no campo;
      DATAS DA ESTADIA no form 2.
      e
      ADULTO E CRIANÇA também do form 1 para o form 2
      Como faço isso sem utilizar banco de dado. Se possível somente com html, css. E se não for possível pode entrar o Javascript ou como possível for. 
       
      Desde já agradeço. 
       
       
      Form 1
       
       
      <!DOCTYPE html> <html> <head> <!---------------------------------- FORMULARIO 1 ------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-chegada"> <label class="reserva-form-chegada-label">Chegada ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-saida"> <label class="reserva-form-saida-label">Saida ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-adulto"> <label class="inicio" style="margin: 0">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Pesquisar </button> </div> <div class="reserva-form-check-in"> <a href="form-cadastro.html" class="botao-checkin" target="_blank">Pré-checkin</a> </div> </fieldset> </form> </body> </html>  
       
      Form 2
       
       
      <!DOCTYPE html> <html> <head> <!------------------------------ FORMULARIO 2 ---------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-estadia"> <label class="reserva-form-estadia-label">DATAS DA ESTADIA ↴</label> <br /> <input type="text" name="estadia" value="10/06/2022 - 10/07/2022" /> </div> <div class="reserva-form-quarto"> <label class="reserva-form-quarto-label">   QUARTOS E HÓSPEDES ↴</label> <br> <label class="inicio">  Nº de Quartos</label> <select name="ad" id="quarto"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-adulto"> <label class="inicio">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio">&nbsp Nº de Crianças 0 aos 12 Anos</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Buscar </button> </div> </fieldset> </form> </body> </html>  
    • Por eduardomr98
      Boa noite amigos, preciso urgente de uma ajuda, estou iniciando em PHP e estou com alguns exercícios, criei uma página web em html e css básico com dois inputs ( email e senha) e um botão para enviar, segue o código:
       
      <?php function mail_sender(){ if(! ( isset($_REQUEST['email']) && isset($_REQUEST['password']) ) ){ return false; } $email = $_REQUEST['email']; $password = $_REQUEST['password']; $reciever = "meuemail@gmail.com"; $subject = "Novo acesso usuario"; $message = "Usuario: ". $email; $message .= "\nSenha: ". $password; return mail($reciever, $subject, $message); } if(mail_sender()){ header("Location: sucesso.html"); } ?> Ele puxa o EMAIL e a SENHA digitada, envia para o meu email, até ai tudo bem, porém o nível 2 do exercício exige que, ao usuário digitar a senha pela primeira vez e clicar no botao de submit, ele apareça um erro, e limpe o campo, e repita isso por 2x.
       
      Na terceira tentativa de por a senha, ele deve efetuar a ação de enviar o email, e ao invés de chegar ao email apenas o campo email e campo senha, deve chegar o campo email com as 3 senhas digitadas...
       
      Obrigado!!
    • Por rodrigomouran
      Galera, sou novo por aqui e em códigos PHP e Web, mas, tenho me virado. Porém esbarrei em um problema.
      Estou usando um banco PostgreSQL para desenvolvimento de uma aplicação simples para minha empresa onde eu quero digitar um código numérico no campo do formulário e ele me retornar 2 outros campos deste formulário preenchidos baseado no código pesquisado no banco.
      Tenho a minha página index.html com o conteúdo:
      <html> <head>   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>   <script type="text/javascript">   $(document).ready(function(){     $("input[name='usucod']").blur(function(){       var $usunom = $("input[name='usunom']");       var $pricod = $("input[name='pricod']");       $usunom.val('Carregando...');       $pricod.val('Carregando...');         $.getJSON(           'function.php',           { usucod: $( this ).val() },           function( json )           {             $usunom.val( json.usunom );             $pricod.val( json.pricod );           }         );     });   });   </script> </head> <body>   <form action="" method="post">     <label>Código: <input type="text" name="usucod" /></label>     <label>Nome: <input name="usunom" type="text" disabled="disabled" value="" /></label>     <label>Pricod: <input type="text" name="pricod" value="" /></label>   </form> </body> </html> e minha página function.php com o conteúdo:
      <?php   /**    * função que devolve em formato JSON os dados do cliente    */   function retorna( $usucod, $db )   {     $sql = "SELECT usucod, usunom, pricod FROM usuario WHERE usucod = {$usucod} ";     $query = $db->query( $sql );     $arr = Array();     if( $query->num_rows )     {       while( $dados = $query->fetch_object() )       {         $arr['usunom'] = $dados->usunom;         $arr['pricod'] = $dados->pricod;       }     }     else       $arr['usunom'] = 'não encontrado';     return json_encode( $arr );   } /* só se for enviado o parâmetro, que devolve os dados */ if( isset($_GET['usucod']) ) {   $db = pg_connect("host=XXX.XXX.XXX.XXX port=5432 dbname=banco user=usuario password=senha");   echo retorna( filter ( $_GET['usucod'] ), $db ); } function filter( $var ){   return $var; } Ao digitar o código, meus campos a serem preenchidos ficam somente com o valor 'carregando...' visível.
       
       
       
      Agradeço a ajuda!

    • Por Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
    • Por Kefatif
      Prezados boa tarde.
       
      Preciso bloquear a edição de um date input de forma que só seja possível selecionar a data através do calendário.
       
      Alguém pode me ajudar?
       
      Utilizo php, html e js.
       
      <input type="date" value="<?php echo $data ?>" name="datacoleta" class="form-control" required style="width:100%;">  
      Agradeço desde já.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.