JavaScript

Como bloquear ctrl + v em caixa de texto com JavaScript (colar)

9 de dezembro de 2020

Como bloquear ctrl + v em caixa de texto com JavaScript (colar)

Neste artigo você vai aprender a como bloquear ctrl + v em caixa de texto com JavaScript, ou seja, impedir o usuário de colar texto em um input

bloquear ctrl + v em caixa de texto capa

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora ver como funciona o bloqueio da ação de colar um texto com JavaScript!

A ideia é bem simples, vamos adicionar um evento de paste ao input alvo e caso identificar este comportamento vamos cancelar o evento

Utilizando o método preventDefault para realizar o cancelamento do evento

Veja um exemplo prático:

var description = document.querySelector("#description");

description.addEventListener("paste", function(e) {
	
  e.preventDefault();
	
});

Desta forma não podemos mais utilizar o ctrl + v neste input, ou seja, não é mais possível colar conteúdo

Todas as outras operações são permitidas, inclusive o ctrl + c, para copiar

o método preventDefault pode ser utilizado para cancelar qualquer tipo de evento quando for necessário

Podemos atrelar ele a uma lógica e identificar o ponto que queremos cancelar

E caso precisarmos bloquear a cópia de um texto, ou seja, o ctrl + c

Podemos utilizar o evento de copy, e realizar a mesma operação que criamos para o problema do paste

Conclusão

Neste artigo aprendemos a como bloquear ctrl + v em caixa de texto, ou seja, impedir que o conteúdo seja colado em um input

Utilizamos o evento paste, que é ativado quando algum conteúdo é inserido por meio de control + v

Ao identificar este tipo de evento, utilizamos o preventDefault para cancelar que o mesmo ocorra

Desta maneira conseguimos impedir o paste nos inputs do nosso formulário

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x