Criar máscara para CPF com JavaScript

Nessa postagem mostraremos como criar um campo de texto em HTML, que irá ter uma máscara para CPF. A função e o código para isso são os seguintes:

        <script type="text/javascript">
            function FormataCpf(campo, teclaStringpres)
            {
                if (event.keyCode < 48 || event.keyCode > 57){
                    event.returnValue = false;
                    return false;
                } else {
                    var teclaString = teclaStringpres.keyCode;
                    var vr = new String(campo.value);
                    vr = vr.replace(".", "");
                    vr = vr.replace("/", "");
                    vr = vr.replace("-", "");
                    tam = vr.length + 1;
                    if (teclaString != 14)
                    {
                        if (tam == 4)
                            campo.value = vr.substr(0, 3) + '.';
                        if (tam == 7)
                            campo.value = vr.substr(0, 3) + '.' + vr.substr(3, 6) + '.';
                        if (tam == 11)
                            campo.value = vr.substr(0, 3) + '.' + vr.substr(3, 3) + '.' + vr.substr(7, 3) + '-' + vr.substr(11, 2);
                    }
                }
            }
        </script>
       
        <input type="text" name="data" maxlength="14" onkeypress="FormataCpf(this,event)" />

Em preto, o códgio em JavaScript responsável por criar a máscar. Em vermelho a tag HTML responsável por criar o input-text.

Para testar esse código basta copiá-lo e colá-lo em um editor de texto e depois salvar o arquivo com a extensão .html.