Você pode mascarar um campo utilizando:
JQuery Mask Plugin
Documentação
Exemplo de uso:
$(document).ready(function(){
$('#telefone').mask('(00) 0000-0000');
});
Ou no próprio html:
<input type="text" name="telefone" data-mask="(00) 0000-0000" data-mask-selectonfocus="true" />
Você também pode aplicar callback, em fim... há vários exemplos na documentação que se encaixam a sua necessidade..
Para casos em que o estado possua o nono dígito, você pode utilizar a
mudança On-the-fly: Exemplo retirado da documentação, necessita apenas
a adaptação a sua necessidade:
var options = {onKeyPress: function(cep, e, field, options){
var masks = ['00000-000', '0-00-00-00'];
mask = (cep.length>7) ? masks[1] : masks[0];
$('.crazy_cep').mask(mask, options);
}};
$('.crazy_cep').mask('00000-000', options);
Ou a solução que o @Wallace forneceu nos comentários que seria assim:
$(document).ready(function(){
$('#telefone').mask('(00) 0000-0000#');
});
Ou também a seguinte expressão:
$(document).ready(function(){
$('#telefone').mask('(00) 0000-00009');
});
Onde o 0 seria obrigatório e o 9 opcional;
@Wallace também citou a validação utilizando HTML5.
input
. Fiz uma edição na sua pergunta, alterando o título. Você pode revertê-la caso não apresente melhorias.