Estou criando um site que pede o nome e o CPF da pessoa o CPF tem que estar no formato xxx.xxx.xxx-xx
. E ao apertar o botão ele cadastra a pessoa(Os dados só são exibidos na tela). Mas eu resolvi criar um script que completa automaticamente os símbolos do CPF quando o usuário começa a digitar que é o .
e o -
. Mas o script sim, funciona ele autocompleta os símbolos só que ao tentar apagar não apaga, olhem o código esse é um protótipo do script do projeto que estou criando.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input id="box" type="text" maxlength="14">
<script>
var box = window.document.querySelector("#box");
box.addEventListener("input", function()
{
switch (box.value.length)
{
case 3:
box.value += ".";
break;
case 7:
box.value += ".";
break;
case 11:
box.value += "-";
}
});
</script>
</body>
</html>
Notem, que ao digitar o CPF eu não consigo apagar os símbolos porque estou usando o event input
no input
. Assim cada vez que eu modificar os dados dentro do input
o event input
sera chamado e caira lá no switch
e irar executar o case 11:
, isso porque o box.value.length
sera igual a 11
. Assim cada vez que você tentar apagar, não dá porque ele sempre vai cair no case 11:
, então este é meu problema não consigo apagar os símbolos. Como eu fasso para apagalos?, sem deixar de usar o event input
?, pois eu necessito deste event
no script para poder atualizar automaticamente os simbolos ao vivo para o usuário, assim ele não vai ter o trabalho de digitalos e irar melhorar mais a experiência dele com o meu site.