I'm starting in HTML / CSS and trying to mask just those tags (HTML / CSS) for the fields on my form. Is it possible or should I use JavaScript to import the masks?
<label for="campo3">Data de Nascimento</label>
<input id="campo3" type="text" class="form-control" placeholder="Ex.: dd/mm/aaaa" data-mask="00/00/0000" maxlength="8" autocomplete="off" name="customer['birthdate']"> For the fields where "dates" will be, you could use the type="date" , but it is not supported in Internet Explorer and Safari, according to documentation in MDN .
Only with CSS / HTML you will not be able to create masks in the fields. This type of manipulation is only possible through script. The placeholder is indicated only to illustrate to the user the format or type of data to be inserted.
There are some mask plugins that you can import, but you can even deploy it with pure JavaScript without having to import anything. Here's a simple JavaScript function that formats the data entered according to the type entered in oninput :
function mascara(i,t){
var v = i.value;
if(isNaN(v[v.length-1])){
i.value = v.substring(0, v.length-1);
return;
}
if(t == "data"){
i.setAttribute("maxlength", "10");
if (v.length == 2 || v.length == 5) i.value += "/";
}
if(t == "cpf"){
i.setAttribute("maxlength", "14");
if (v.length == 3 || v.length == 7) i.value += ".";
if (v.length == 11) i.value += "-";
}
if(t == "cnpj"){
i.setAttribute("maxlength", "18");
if (v.length == 2 || v.length == 6) i.value += ".";
if (v.length == 10) i.value += "/";
if (v.length == 15) i.value += "-";
}
}
The below part prevents any character type other than number from being entered:
if(isNaN(v[v.length-1])){
i.value = v.substring(0, v.length-1);
return;
}
In event oninput , you send the element and data type to the function:
oninput="mascara(this, 'data')"
oninput="mascara(this, 'cpf')"
oninput="mascara(this, 'cnpj')"
And the function itself already delimits the number of characters that will be allowed in the field:
i.setAttribute("maxlength", "14"); // para CPF
See working:
function mascara(i,t){
var v = i.value;
if(isNaN(v[v.length-1])){
i.value = v.substring(0, v.length-1);
return;
}
if(t == "data"){
i.setAttribute("maxlength", "10");
if (v.length == 2 || v.length == 5) i.value += "/";
}
if(t == "cpf"){
i.setAttribute("maxlength", "14");
if (v.length == 3 || v.length == 7) i.value += ".";
if (v.length == 11) i.value += "-";
}
if(t == "cnpj"){
i.setAttribute("maxlength", "18");
if (v.length == 2 || v.length == 6) i.value += ".";
if (v.length == 10) i.value += "/";
if (v.length == 15) i.value += "-";
}
if(t == "cep"){
i.setAttribute("maxlength", "9");
if (v.length == 5) i.value += "-";
}
if(t == "tel"){
if(v[0] == 9){
i.setAttribute("maxlength", "10");
if (v.length == 5) i.value += "-";
}else{
i.setAttribute("maxlength", "9");
if (v.length == 4) i.value += "-";
}
}
}<label for="campo3">Data de Nascimento</label>
<input oninput="mascara(this, 'data')" id="campo3" type="text" class="form-control" placeholder="Ex.: dd/mm/aaaa" autocomplete="off" name="customer['birthdate']">
<br>
<label for="campo4">CPF</label>
<input oninput="mascara(this, 'cpf')" id="campo4" type="text" class="form-control" placeholder="Ex.: xxx.xxx.xxx-xx" autocomplete="off" name="customer['cpf']">
<br>
<label for="campo5">CNPJ</label>
<input oninput="mascara(this, 'cnpj')" id="campo5" type="text" class="form-control" placeholder="Ex.: xx.xxx.xxx/xxxx-xx" autocomplete="off" name="customer['cnpj']">
<br>
<label for="campo6">CEP</label>
<input oninput="mascara(this, 'cep')" id="campo6" type="text" class="form-control" placeholder="Ex.: xxxxx-xxx" autocomplete="off" name="customer['cep']">
<br>
<label for="campo7">Telefone</label>
<input oninput="mascara(this, 'tel')" id="campo7" type="text" class="form-control" placeholder="Ex.: xxxxx-xxxx" autocomplete="off" name="customer['tel']"><!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Kaio Maravilhoso</title>
<meta charset = "UTF-8"/>
<link rel ="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script>
function mascaraData(){
var data = document.getElementById('txtData').value;
if(data.length==2){
document.getElementById('txtData').value = data +'/';
}
else if (data.length==5){
document.getElementById('txtData').value = data +'/';
}
}
function mascaraRg(){
var rg= document.getElementById('txtRg').value;
if(rg.length==2){
document.getElementById('txtRg').value = rg +'.';
}
else if (rg.length==6){
document.getElementById('txtRg').value = rg +'.';
}
else if (rg.length==9){
document.getElementById('txtRg').value = rg +'-';
}
}
function mascaraTelefone(){
var telefone= document.getElementById('txtTelefone').value;
if(telefone.length==1){
document.getElementById('txtTelefone').value ='(' + telefone;
}
else if (telefone.length==3){
document.getElementById('txtTelefone').value = telefone +')';
}
else if (telefone.length==8){
document.getElementById('txtTelefone').value = telefone +'-';
}
}
function mascaraCel(){
var celular= document.getElementById('txtCel').value;
if(celular.length==1){
document.getElementById('txtCel').value ='(' + celular;
}
else if (celular.length==3){
document.getElementById('txtCel').value = celular +')';
}
else if (celular.length==9){
document.getElementById('txtCel').value = celular +'-';
}
}
function mascaraCpf(){
var cpf = document.getElementById('txtCpf').value;
if(cpf.length==3){
document.getElementById('txtCpf').value = cpf +'.';
}
else if(cpf.length==7){
document.getElementById('txtCpf').value = cpf +'.';
}
else if (cpf.length==11){
document.getElementById('txtCpf').value = cpf +'-';
}
}
function checarEmail(){
var email= document.getElementById('txtEmail').value;
if(email==""||email.indexOf('@')==-1||email.indexOf('.')==-1){
alert("Por favor Insira um E-mail valido");
}
}
function limpa_formulário_cep() {
document.getElementById('txtRua').value=("");
document.getElementById('txtBairro').value=("");
document.getElementById('txtCidade').value=("");
document.getElementById('txtUf').value=("");
}
function meu_callback(conteudo) {
if (!("erro" in conteudo)) {
//Atualiza os campos com os valores.
document.getElementById('txtRua').value=(conteudo.logradouro);
document.getElementById('txtBairro').value=(conteudo.bairro);
document.getElementById('txtCidade').value=(conteudo.localidade);
document.getElementById('txtUf').value=(conteudo.uf);
}
else {
limpa_formulário_cep();
alert("CEP não encontrado.");
}
}
function mascaraCep(){
var cep = document.getElementById('txtCep').value;
if(cep.length==5){
document.getElementById('txtCep').value = cep +'-';
}
}
function pesquisacep(valor) {
var cep = valor.replace(/\D/g, '');
if (cep != "") {
var validacep = /^[0-9]{8}$/;
if(validacep.test(cep)) {
//Preenche os campos com "..." enquanto consulta webservice.
document.getElementById('txtRua').value="...";
document.getElementById('txtBairro').value="...";
document.getElementById('txtCidade').value="...";
document.getElementById('txtUf').value="...";
var script = document.createElement('script');
script.src = 'https://viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';
document.body.appendChild(script);
}
else {
limpa_formulário_cep();
alert("Formato de CEP inválido.");
}
}
else {
limpa_formulário_cep();
}
};
</script>
</head>
<body>
<div class="container">
<h1>Cadastro</h1>
<hr />
<form method="get class "form-group">
<div class="row">
<div class ="col-md-6">
<div class="form-group">
Nome:<input type="text" class= "form-control" id="txtNome" maxlength="10"/>
</div>
<div class = "row">
<div class ="col-md-4">
<div class="form-group">
Data:<input type="text" class= "form-control" id="txtData" onkeypress="mascaraData()" maxlength="10"/>
</div>
</div>
</div>
<div class="row">
<div class ="col-md-6">
<div class="form-group">
CPF:<input type="text" class= "form-control" id ="txtCpf" onkeypress="mascaraCpf()" maxlength="14"/>
</div>
</div>
<div class ="col-md-6">
<div class="form-group">
RG:<input type="text" class= "form-control" id ="txtRg" onkeypress="mascaraRg()" maxlength="12"/>
</div>
</div>
</div>
<div class="form-group">
Telefone:<input type="text" class= "form-control" id ="txtTelefone" onkeypress="mascaraTelefone()" maxlength="13"/>
</div>
<div class="form-group">
Celular:<input type="text" class= "form-control" id ="txtCel" onkeypress="mascaraCel()" maxlength="14"/>
</div>
<div class="form-group">
Cep:<input type="text" class= "form-control" id ="txtCep" onblur="pesquisacep(this.value)" onkeypress="mascaraCep()"/>
</div>
<div class="form-group">
Cidade:<input type="text" class= "form-control" id ="txtCidade"/>
</div>
<div class="form-group">
Bairro:<input type="text" class= "form-control" id ="txtBairro"/>
</div>
<div class="form-group">
Rua:<input type="text" class= "form-control" id ="txtRua"/>
</div>
<div class="form-group">
Uf:<input type="text" class= "form-control" id ="txtUf"/>
</div>
<div class="form-group">
Email:<input type="text" class= "form-control" id ="txtEmail" onblur="checarEmail();"/>
</div>
<div class="form-group">
Selecione
<select class ="form-control">
<option></option>
<option>opção 1</option>
<option>opção 2</option>
<option>opção 3</option>
<option>opção 4</option>
</select>
</div>
<input type="button" class="btn btn-primary"
value="enviar"/>
</div>
<div class="col-md-6">
</div>
</div>
</form>
</div>
</body>
</html>
If someone wants the mask with DDD (xx) xxxx-xxxx:
if(t === "tel"){
if (v.length === 1) i.value = "(" + i.value;
if (v.length === 3) i.value += ") ";
if(v[5] == 9){
i.setAttribute("maxlength", "15");
if (v.length === 10) i.value += "-";
}else{
i.setAttribute("maxlength", "14");
if (v.length === 9) i.value += "-";
}
}