0

Estou tentando fazer com que o input type="text" só aceite números e fique com o formato de data conforme vou inserindo os números.

//Exibir no formato de data
function mascaraData( campo, e )
{
	var kC = (document.all) ? event.keyCode : e.keyCode;
	var data = campo.value;

	if( kC!=8 && kC!=46 )
	{
		if( data.length==2 )
		{
			campo.value = data += '/';
		}
		else if( data.length==5 )
		{
			campo.value = data += '/';
		}
		else{
			campo.value = data;
		}
	}
}

//Não permite alfabeto
$(function() {
   $('#input2').on('input', function() {
      this.value = this.value
         .replace(/[^\d]/g, '');// numbers and decimals only
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Exibir no formato de data</h3>
<input id="input1" type="text" maxlength="10" onkeypress="mascaraData( this, event )" required>

<h3>Não permite alfabeto</h3>
<input id="input2" type="text" maxlength="10" required>

Como já mostrei no exemplo, estou conseguindo impedir a inserção de letras, também estou conseguindo formatar o input como data, o problema é que não estou conseguindo unir os dois algoritmos, de forma a fazer um único input, que não permita letras e formate no formato de data.

1
  • 1
    Você vai ter que fazer uma validação rigorosa, pois esse input aceita 00/00/0000 como data. 30/09/2019 às 21:22

1 Resposta 1

1

Tente o código abaixo:

//Exibir no formato de data
function mascaraData( campo, e )
{
	var kC = (document.all) ? event.keyCode : e.keyCode;
	
  var data = campo.value;

	if( kC!=8 && kC!=46 )
	{
		if( data.length ==2 )
		{
			campo.value = data + '/';
		}
		else if( data.length==5 )
		{
			campo.value = data + '/';
		}
		else{
			campo.value = data;
		}
	}
}

//Não permite alfabeto
$(function() {
   $('#input1, #input2').keypress(function(evt){

 var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }

  //Usei uma expressão regular:

  var regex = /[0-9]|\//;
  if(!regex.test(key) ) {
   evt.preventDefault();
  }
  mascaraData(this,evt);
   });
   
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Exibir no formato de data</h3>
<input id="input1" type="text" maxlength="10"  required>

<h3>Não permite alfabeto</h3>
<input id="input2" type="text" maxlength="10" required>

REFERÊNCIA:
1. https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .