Mascara de Telefone com até 9 dígitos utilizando Javascript

Como adicionar uma máscara de telefone com até 9 dígitos em um campo utilizando apenas Javascript.

Você pode utilizar Plugins em jQuery para fazer isso, porém será que é necessário você incluir todo o jQuery + o Plugin para fazer um simples máscara de  telefone?

Eu acho que não, por isso vamos utilizar apenas Javascript, nada de frameworks! Vamos ao código!

Funções para Máscara de Telefone com até 9 dígitos

 function mascaraTelefone( campo ) {
      
  function trata( valor,  isOnBlur ) {  
  valor = valor.replace(/\D/g,"");                      
  valor = valor.replace(/^(\d{2})(\d)/g,"($1)$2");      
  if( isOnBlur ) {     
     valor = valor.replace(/(\d)(\d{4})$/,"$1-$2");   
  } else {
     valor = valor.replace(/(\d)(\d{3})$/,"$1-$2"); 
  }
  return valor;
  }
  
  campo.onkeypress = function (evt) {   
  var code = (window.event)? window.event.keyCode : evt.which;   
  var valor = this.value  
  if(code > 57 || (code < 48 && code != 8 ))  {
     return false;
  } else {
     this.value = trata(valor, false);
  }
  }
  
  campo.onblur = function() {
  
  var valor = this.value;
  if( valor.length < 13 ) {
     this.value = ""
  }else {      
     this.value = trata( this.value, true );
  }
  }
  
  campo.maxLength = 14;
}

Para aplicar a mascara em um campo devemos utilizar:

 mascaraTelefone( document.getElementById('id_do_campo') );

Só altere o parâmetro id_do_campo de acordo com o ID do seu campo.