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 Kefatif
      Prezados, boa tarde.
       
      Preciso de ajuda com dois casos...
       
      1) Preciso criar dois botões "habilitar" e "desabilitar".
       
      Onde ao clicar no botão habilitar, ele grave no banco mysql no campo habilitado "S" para habilitado e "N" caso clique no desabilitar.
       
      2) A segundo etapa seria ao carregar a página do input ele habilitar ou não de acordo com a informação do meu banco.
       
      Agradeço desde já a ajuda de todos.
    • By Jack Oliveira
      Ola pessoal  boa noite..
      Vou tentar explicar aqui o meu problema da melhor forma que der, espero que possam entender...
       
      Amigos eu estou tendo um problema em fazer uma atualização 
      Bom quando vou cadastrar da sucesso e é gravado normal no banco de dados ate ai esta ok..
       
      Seria  o seguinte dentro de um form ele gera linhas ou seja + inputs caso seja preciso entende? Usando javascript´s, quando vou atualizar as informações que esta nas tabelas ou seja
      são 3 tabelas 
      tbl_department 
      dep_id
      nome
      news etc....
       
      tbl_department_openning_hour
      hou_id
      titulo
      time
      dep_id  <-- Aqui onde pega o id da tabela tbl_department
       
       
      tbl_department_faq
      faq_id
      titulo
      conteudo
      dep_id  <-- Aqui onde pega tbm o id da tabela tbl_department
       
      Obs: Ele Grava normal no banco de dados, porem quando atualizar que não esta dando certo, e é preciso que seja atualizado todos os input das tabelas tbl_department_faq e tbl_department_openning_hour. Acredito que já entenderam aqui umas das parte que seria preciso.
       
      Bom vou posta uma parte do HTML  do FORM para melhor entender o que seria ok!!, Sei que não tem nada a ver com o PHP, mais como tinha dito apenas para melhor entender..
      <?php $dep_id = get('EditarItem'); $QueryTblDepartment = DBRead('tbl_department','*',"WHERE dep_id = '{$dep_id}'"); if (is_array($QueryTblDepartment)) { foreach ($QueryTblDepartment as $TblDepartment) { ?> <form method="post" action="?Atualizar=<?= $TblDepartment['dep_id']; ?>" enctype="multipart/form-data"> <div class="col-md-6"> <div class="form-group"> <label>Titulo:</label> <input class="form-control" name="dep_name" value="<?= $TblDepartment['dep_name']; ?>" placeholder="Exemplo: Globo City" autocomplete="off" required> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>Telefone:</label> <input class="form-control telefone" name="dep_phone" value="<?= $TblDepartment['dep_phone']; ?>" placeholder="Exemplo: (00) 0000-0000" autocomplete="off"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>WhatsApp:</label> <input class="form-control whatsapp" name="dep_whatsapp" value="<?= $TblDepartment['dep_whatsapp']; ?>" placeholder="Exemplo: (00) 0.0000-0000" autocomplete="off"> </div> </div> <div class="col-md-6"> <div class="form-group"> <label>Fax:</label> <input class="form-control" name="dep_fax" value="<?= $TblDepartment['dep_fax']; ?>" placeholder="Exemplo: (00) 0000-0000" autocomplete="off"> </div> </div> <div class="form-group"> <label>Seção de FAQ:</label> <table id="fqSection" class="table table-bordered table-striped"> <thead> <tr> <th style="width:50%;">Titulo</th> <th>Contente</th> <th>Ação</th> </tr> </thead> <tbody> <?php //Departamento FAQ $QueryDepartamentoFaq = DBRead('tbl_department_faq','*',"WHERE dep_id='{$dep_id}'"); if (is_array($QueryDepartamentoFaq)) { foreach ($QueryDepartamentoFaq as $Fa) { $arr_fq_id[] = $Fa['fq_id']; $arr_fq_title[] = $Fa['fq_title']; $arr_fq_content[] = $Fa['fq_content']; }} if(isset($arr_fq_title)): for($i=0;$i<count($arr_fq_title);$i++) { ?> <tr> <td> <input autocomplete="off" type="text" class="form-control" style="width:100%" name="fq_title" value="<?= $arr_fq_title[$i]; ?>"> </td> <td> <textarea class="form-control" cols="30" rows="10" style="width:100%;height:50px;" name="fq_content"><?= $arr_fq_content[$i]; ?></textarea> </td> <td> <span class="btn btn-danger btn-xs"><a onclick="DeletarItem(<?= $arr_fq_id[$i]; ?>, 'DeletarFaq');" href="#!" style="color: #fff;">Excluir</a></span> </td> </tr> <?php //}} } endif; ?> </tbody> </table> <!-- Aqui para criar novos input para serem gravado no banco caso seja preciso --> <input type="button" class="btn btn-info btn-small" id="btnAddFaq" value="+ Adicionar linha" style="margin-bottom:10px;"> </div> <center><hr> <button class="btn btn-primary">Atualizar</button> <br><br> </center> </div> </form> <?php } } ?> Bom ai esta apenas um pouco do form tem mais coisa que seria igual o que preciso resolver
       
      Agora a parte do PHP que preciso resolver, vou posta apenas uma parte para poder entender tbm
       
      <?php // Atualizar Item de Departamento if (isset($_GET['Atualizar'])) { $dep_id = get('Atualizar'); $fq_empty = 0; if( !empty($_POST['fq_title']) && !empty($_POST['fq_content']) ) { $fq_empty = 1; foreach ($_POST['fq_title'] as $value) { //Sempre mostra o erro nesta linha $arr1[] = $value; } foreach ($_POST['fq_content'] as $value) { //Sempre mostra o erro nesta linha $arr2[] = $value; } $j=0; for($i=0;$i<count($arr1);$i++) { //Sempre mostra o erro nesta linha if($arr1[$i]=='' && $arr2[$i]=='') {continue;} else { $new_arr1[$j] = $arr1[$i]; $new_arr2[$j] = $arr2[$i]; $j++; } } } $AtualizarDepartment = array( 'dep_name' => post('dep_name'), 'dep_slug' => UrlAmigavel(post('dep_name')), 'dep_detail' => post('dep_detail'), 'dep_address' => post('dep_address'), 'dep_phone' => post('dep_phone'), 'dep_whatsapp' => post('dep_whatsapp'), 'dep_fax' => post('dep_fax'), 'dep_email' => post('dep_email'), 'meta_title' => post('dep_name'), 'meta_keyword' => post('meta_keyword'), 'meta_description' => LimitarTexto(post('dep_detail'),'200','...') ); $QueryTblDepartment = DBUpdate('tbl_department', $AtualizarDepartment, "dep_id = '{$dep_id}'", TRUE); if ($QueryTblDepartment != 0) { Redireciona('?sucesso&Department'); } else { Redireciona('?erro&Department'); } // Atualizar tbl_department_faq if($fq_empty == 1) { for($i=0;$i<count($new_arr1);$i++) { $TblDepartmentFaq = array( 'fq_title' => $new_arr1[$i], 'fq_content' => $new_arr2[$i], 'dep_id' => $dep_id ); $QueryTblDepartmentFaq = DBUpdate('tbl_department_faq', $TblDepartmentFaq, "dep_id = '{$dep_id}'"); } } if ($QueryTblDepartmentFaq != 0) { Redireciona('?sucesso&AtualizarFaq'); } else { Redireciona('?erro&AtualizarFaq'); } // Criar Novo input para tbl_department_faq if($fq_empty == 1) { for($i=0;$i<count($new_arr1);$i++) { $SqlFaq = array( 'fq_title' => $new_arr1[$i], 'fq_content' => $new_arr2[$i], 'dep_id' => $QueryTblDepartment ); $QueryFaq = DBRead('tbl_department_faq', $SqlFaq); } } if ($QueryFaq != 0) { Redireciona('?sucesso&Faq'); } else { Redireciona('?erro&Faq'); } } Neste caso ao mesmo tempo que teria que atualizar a
      tbl_department_faq
      faq_id
      titulo
      conteudo
      dep_id  <-- Aqui onde pega tbm o id da tabela tbl_department
       
      Ele precisa grava caso seja preciso criar nova linha ou seja criar novo input para atualizar junto entende?
       
      Pessoal espero que eu tenha sido bem objetivo aqui para que possam entender....
       
      Desde já agradeço
    • By biakelly
      Oi, vim do fórum de PHP,  eu havia postado uma dúvida lá, mas acredito e por recomendação que minha dúvida seja melhor aplicada aqui.
       
      Bem, estou fazendo uma página que precisa ter a cotação do Bitcoin.
      Nesta pagina preciso de 2 inputs um que traga o preço do bitcoin e outro que traga o preço em real.
      Ex: 1 Bitcoin custa R$ xxx,00 reais (valor padrão)
       
      Mas ao digitar R$100,00 no campo real ele precisa trazer o preço equivalente a quantidade de Bitcoins que vale R$100,00
      O mesmo para o Bitcoin, se eu digitar uma fração ele precisaria trazer o valor em Reais.
       
      Encontrei um site que faz isso (https://dolarhoje.com/bitcoin-hoje/), mas queria algo para minha página parecido
       
       
      Bem, até consigo pegar o valor com este código simples em PHP:
       
      <?php $url = 'https://www.mercadobitcoin.net/api/btc/ticker'; $result = file_get_contents($url); $result = json_decode($result, true); ?>  
      Será que em Javascript é possível fazer isso? Desculpem, entendo quase zero de Javascript
      Vocês conseguem me ajudar?
    • By Sapinn
      Eu tenho um form e toda vez que alguém clicar no input eu quero que a borda de baixo mude a cor e quando ele clicar fora quero que volte ao normal quero isso para todos os campo de todos os foms que eu tiver
    • By fideles
      Fala pessoal, tudo tranquilo?
       
      Venho recorrer a vós pois já não consigo mais.... 
       
      Tenho um campo select com algumas opções de nome.
      <select class="seleciona_nome"> <option value="Joao">Joao</option> <option value="Julio">Julio</option> <option value="Pedro">Pedro</option> </select>  
      E um campo input do tipo "text"
      <input type="text" class="opcaoSelect" autocomplete="off" disabled="disabled">  
      Preciso que ao selecionar uma opção do "Select" seja auto preenchido no input. Tenho um codigo que funcionava e não sei mais porque não funciona, veja abaixo;
       
      <script> $(document).ready(function(){ $('.seleciona_nome').on('change', addOption); }); function addOption(){ $('.opcaoSelect').val(this.value); } </script>  
      Peço ajuda ai caso alguém consiga me ajudar a entender porque este não funciona mais.
       
      Obrigado.
       
×

Important Information

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