Sua dúvida é sobre o "autocomplete"? Se for, eu recomendei deixar o autocomplete em "off" pra não aparecer no vídeo os cpfs que cadastrei em outros sites. Quando eu estava gravando sobre esse assunto, apareceu cpfs de colegas, familia... justamente pq faço favores pra essas pessoas. Então, eu sempre deixo essa configuração. Muita gente prefere deixar ativado pq é mais rápido para logar num sistema na proxima vez. Eu ja nao gosto muito.
Olá... Essa foi a primeira versão da máscara. Há outras versões aqui no canal. Mas vc pode ir direto no repositório do Github github.com/yuri97real/FormCPF
Quando usamos a sintaxe "document.querySelector('elemento')" estamos pegando apenas a referencia de um elemento html. Logo, para ter acesso ao valor que está dentro desse elemento, precisamos usar o "value", que é uma propriedade que alguns elementos como o input tem.
Você pode comprovar usando o console.log do navegador. Ao usar "console.log(elemento)" vc vai ver um objeto html. Agora se vc usar "console.log(elemento.value)" você vai ver o valor contido nesse elemento.
Resolvi meu problema com seu vídeo! Muito obrigada. Fica uma dica: trocar o evento onkeyup por onkeypress evita um bug causado quando vc tenta apagar alguns dígitos. Com o onkeyup, ao apagar um dos caracteres ( . ou - ) e soltar a tecla, a função é chamada e coloca o símbolo de novo.
Yuri eu viih seu tutorial achei perfeito, no entanto nao estou conseguindo deixar a caixa em branco ao carregar a página, os demais estão totalmente como eu queria a estrutura do campo aparecer ao clicar dentro e ao clicar fora a caixa aparecer vazia
Você pode usar os atributos "onFocus" e "onBlur". Esses dois atributos têm o funcionamento semelhante ao "onkeyup" utilizado no vídeo. O "onFocus" é um evento que dispara uma função quando um elemento pega foco, ou seja, quando o usuário clica no elemento. E o "onBlur" é uma evento que dispara uma função quando o elemento perde foco, ou seja, quando o usuário clica em algum lugar fora do elemento.
Em todo caso, recomendo vc utilizar "addEventListener". É uma forma mais atualizada de aplicar eventos em elementos html. Recomendo assistir esse vídeo um pouco mais atualizado sobre máscaras ruclips.net/video/28x5J_PFRX0/видео.html. Também recomendo o script atualizado no github github.com/yuri97real/FormCPF
Eu vir. Mais não achei a parte onde o input só pode receber números e caracteres. E caso o usuário venha digitar uma letra ele não aceite, informe a opção de erro.
@@dannycostta711 ruclips.net/video/28x5J_PFRX0/видео.html a partir desse minuto, eu explico como eu removo caracteres não numéricos do meu input. Porém, existe um método mais eficiente, usando o "filter". No github eu usei ele. Recomendo analisar o código lá e até comparar pra ver como ele é melhor. Mas enfim, se seu objetivo é lançar uma msg de erro para entrada de dados não numéricos, você pode usar o addEventListener, com o evento de "keypress". Se NaN(e.key) "tecla não numérica", você dá um e.preventDefault. A msg, você pode dar usando html e css ou um simples alert("Somente Números") por exemplo. Sei que é meio complicado de explicar assim mas futuramente, faço um vídeo mais detalhado sobre validação de dados com javascript.
@@dannycostta711 Acabei de gravar um vídeo de complemento. Espero que ajude ruclips.net/video/TpZ051QkeaA/видео.html. Como extra, recomendo estudar sobre os métodos map, filter e reduce de javascript. Depois que entender esses 3, você vai conseguir fazer muita, mas muita coisa mesmo ;)
Olá... Não entendi sua pergunta. Mas se vc estiver perguntando sobre as ferramentas usadas no vídeo, eu uso o VsCode como editor de código e o lamp-server como servidor local. Em relação ao servidor local, vc pode usar o xampp tbm. No Windows vc pode usar o wamp-server.
@@Yuri97 então né moço eu fiz um curso de HTML(mais acho q só encinaram o básico lá ...) Então tô confusa sobre TD kkk bem eu coloquei TD q vc escreveu nos lugares certo na parte onde tinha q por os pontinhos porém n funcionou ... Estou tentando fazer pelo celular o q tmb n ajuda muito, mais sla a dúvida era se precisava de algo a mais pq n deu certo do geito q eu fiz e taus
@@user-dk3ux2ig2c Olá, eu tenho um palpite. Você deve está tentando rodar um extensão PHP sem servidor, já que vc disse q tá tentando fazer no celular né. Pra resolver, basta que vc renomeie o arquivo index.php para index.html... acredito que pode ser isso. Caso isso não resolva, preciso de mais informações. Tipo, que erro está dando? Tá abrindo no navegador? E outras coisas q vc pode achar q seja relevante. No mais, posso recomendar que vc assista esse outro vídeo, acredito que esteja mais simples. ruclips.net/video/28x5J_PFRX0/видео.html Ele é um pouco grande pq eu passei boa parte do tempo explicando o funcionamento das funções.
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
Já existe aqui no canal um vídeo mais atualizado e mais completo sobre -> ruclips.net/video/28x5J_PFRX0/видео.html
Super Didático Yuri...te adicionei em minha pasta pessoal....você é essencial para quem está começando...linguagem simples. Top! Obrigada!
Obrigada me ajudou muito
com essa solução, se o usuário digitar muito rápido, a mascara falha em algum dos . ou -
Verdade... Esse vídeo é básico e antigo. Há outro melhor ruclips.net/video/28x5J_PFRX0/видео.html
E há uma versão ainda mais recente no Github github.com/yuri97real/FormCPF
?????? 3:15 ???????
Sua dúvida é sobre o "autocomplete"? Se for, eu recomendei deixar o autocomplete em "off" pra não aparecer no vídeo os cpfs que cadastrei em outros sites. Quando eu estava gravando sobre esse assunto, apareceu cpfs de colegas, familia... justamente pq faço favores pra essas pessoas. Então, eu sempre deixo essa configuração. Muita gente prefere deixar ativado pq é mais rápido para logar num sistema na proxima vez. Eu ja nao gosto muito.
Obrigado.
Eu queria adicionar a essa mascara um filtro para o usuário colocar somente numero
Olá... Essa foi a primeira versão da máscara. Há outras versões aqui no canal. Mas vc pode ir direto no repositório do Github github.com/yuri97real/FormCPF
Essa versão do Github tá bem completona
@@Yuri97 Assustei, achei que tinha 97 resposta kkkk. Obrigado pela atenção
O meu patrao, o value significa o que?
Quando usamos a sintaxe "document.querySelector('elemento')" estamos pegando apenas a referencia de um elemento html. Logo, para ter acesso ao valor que está dentro desse elemento, precisamos usar o "value", que é uma propriedade que alguns elementos como o input tem.
Você pode comprovar usando o console.log do navegador. Ao usar "console.log(elemento)" vc vai ver um objeto html. Agora se vc usar "console.log(elemento.value)" você vai ver o valor contido nesse elemento.
Obrigado Yuri !!
Resolvi meu problema com seu vídeo! Muito obrigada. Fica uma dica: trocar o evento onkeyup por onkeypress evita um bug causado quando vc tenta apagar alguns dígitos. Com o onkeyup, ao apagar um dos caracteres ( . ou - ) e soltar a tecla, a função é chamada e coloca o símbolo de novo.
Perfeito... Lá no Github o código tá mais atualizado. Criei duas versões. Da uma olhadinha lá 😋♥️
Era justamente o que estava precisando hehe vlw man
Thanks man you helped me to make the textbox mask for my country's ID
Dei like do pelo placeholder kkkk não consegui achar em lugar nenhum pq n sabia nem como pesquisar isso
muito obrigada esse video me ajudou muito
Gostei, parabéns
Mas uma dica legal que vou dar é usar a function concat(), para concatenar as Strings, faz a mesma coisa, porém fica mais robusto.
Bom conteúdo fera, parabéns!
amigao preciso dessa mascara para colocar no formulario que fiz no wix, tem como dar uma dica
Topper mano. Aí manja dos programas.
Yuri eu viih seu tutorial achei perfeito, no entanto nao estou conseguindo deixar a caixa em branco ao carregar a página, os demais estão totalmente como eu queria a estrutura do campo aparecer ao clicar dentro e ao clicar fora a caixa aparecer vazia
Você pode usar os atributos "onFocus" e "onBlur". Esses dois atributos têm o funcionamento semelhante ao "onkeyup" utilizado no vídeo. O "onFocus" é um evento que dispara uma função quando um elemento pega foco, ou seja, quando o usuário clica no elemento. E o "onBlur" é uma evento que dispara uma função quando o elemento perde foco, ou seja, quando o usuário clica em algum lugar fora do elemento.
Em todo caso, recomendo vc utilizar "addEventListener". É uma forma mais atualizada de aplicar eventos em elementos html. Recomendo assistir esse vídeo um pouco mais atualizado sobre máscaras ruclips.net/video/28x5J_PFRX0/видео.html. Também recomendo o script atualizado no github github.com/yuri97real/FormCPF
valeu feraaaaa
excelente aula, valeu chefe
Boa, mas como faz pra ele não aceitar letras? Aceitar apenas números, pontos e traço.
Oi.. já tem um vídeo mais atualizado sobre ruclips.net/video/28x5J_PFRX0/видео.html
No meu Github tá mais atualizado ainda. E tem tbm um validador. Recomendo ler o Readme.
github.com/yuri97real/FormCPF
Eu vir. Mais não achei a parte onde o input só pode receber números e caracteres. E caso o usuário venha digitar uma letra ele não aceite, informe a opção de erro.
@@dannycostta711 ruclips.net/video/28x5J_PFRX0/видео.html a partir desse minuto, eu explico como eu removo caracteres não numéricos do meu input. Porém, existe um método mais eficiente, usando o "filter". No github eu usei ele. Recomendo analisar o código lá e até comparar pra ver como ele é melhor. Mas enfim, se seu objetivo é lançar uma msg de erro para entrada de dados não numéricos, você pode usar o addEventListener, com o evento de "keypress". Se NaN(e.key) "tecla não numérica", você dá um e.preventDefault. A msg, você pode dar usando html e css ou um simples alert("Somente Números") por exemplo. Sei que é meio complicado de explicar assim mas futuramente, faço um vídeo mais detalhado sobre validação de dados com javascript.
@@dannycostta711 Acabei de gravar um vídeo de complemento. Espero que ajude ruclips.net/video/TpZ051QkeaA/видео.html. Como extra, recomendo estudar sobre os métodos map, filter e reduce de javascript. Depois que entender esses 3, você vai conseguir fazer muita, mas muita coisa mesmo ;)
Gostei muito, valeu!
Po cara valeu eu tava procurando isso e todas as opções eram muito complicadas
Faz um de formulário em etapas?!
Pode deixar... Já está na lista.
Muito bom
Eu tenho q abaixar algo ? Pra isso tô tentando fazer pelo celular n está dando certo
Olá... Não entendi sua pergunta. Mas se vc estiver perguntando sobre as ferramentas usadas no vídeo, eu uso o VsCode como editor de código e o lamp-server como servidor local. Em relação ao servidor local, vc pode usar o xampp tbm. No Windows vc pode usar o wamp-server.
@@Yuri97 então né moço eu fiz um curso de HTML(mais acho q só encinaram o básico lá ...) Então tô confusa sobre TD kkk bem eu coloquei TD q vc escreveu nos lugares certo na parte onde tinha q por os pontinhos porém n funcionou ... Estou tentando fazer pelo celular o q tmb n ajuda muito, mais sla a dúvida era se precisava de algo a mais pq n deu certo do geito q eu fiz e taus
@@user-dk3ux2ig2c Olá, eu tenho um palpite. Você deve está tentando rodar um extensão PHP sem servidor, já que vc disse q tá tentando fazer no celular né. Pra resolver, basta que vc renomeie o arquivo index.php para index.html... acredito que pode ser isso. Caso isso não resolva, preciso de mais informações. Tipo, que erro está dando? Tá abrindo no navegador? E outras coisas q vc pode achar q seja relevante. No mais, posso recomendar que vc assista esse outro vídeo, acredito que esteja mais simples. ruclips.net/video/28x5J_PFRX0/видео.html Ele é um pouco grande pq eu passei boa parte do tempo explicando o funcionamento das funções.
@@Yuri97 tá. Bom obg
@@user-dk3ux2ig2c Recomendo você fazer o curso do Guanabara do canal Curso em Vídeo.
vlw mano me ajudo