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

[Kefatif 0]

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!!!

[Omar~ 87]

<!-- 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>

 

[Kefatif 0]

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á.

[Kefatif 0]

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>

[Jack Oliveira 1]

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(); .
 

[Kefatif 0]

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!